当使用 Material UI 中的 Card 组件时,CardContent 的 padding-bottom 似乎为 24px,我无法使用以下代码覆盖它。我可以使用此方法设置 paddingLeft、Right 和 Top,但由于某种原因 paddingBottom 不起作用。
const styles = theme => ({
cardcontent: {
paddingLeft: 0,
paddingRight:0,
paddingTop:0,
paddingBottom: 0,
},
})
然后应用该样式:
<CardContent className={classes.cardcontent}></CardContent>
这是我在浏览器中预览元素时看到的内容:
.MuiCardContent-root-158:last-child {
padding-bottom: 24px;
}
.Component-cardcontent-153 {
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
我可以将浏览器中的像素编辑为 0。但我无法弄清楚如何定位 MuiCardContent-root-158:last-child 并在编辑器中覆盖 paddingBottom。
最佳答案
这是 v3 和 v4 的语法(下面是 v5 示例):
const styles = {
cardcontent: {
padding: 0,
"&:last-child": {
paddingBottom: 0
}
}
};
这是一个演示这一点的工作示例:
import React from "react";
import ReactDOM from "react-dom";
import CardContent from "@material-ui/core/CardContent";
import { withStyles } from "@material-ui/core/styles";
const styles = {
cardcontent: {
padding: 0,
"&:last-child": {
paddingBottom: 0
}
}
};
function App(props) {
return (
<div>
<CardContent
className={props.classes.cardcontent}
style={{ border: "1px solid black" }}
>
<div style={{ border: "1px solid red" }}>My Content</div>
</CardContent>
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
如果你看CardContent source code ,您可以找到它如何定义默认样式:
export const styles = {
/* Styles applied to the root element. */
root: {
padding: 16,
'&:last-child': {
paddingBottom: 24,
},
},
};
这有助于理解如何覆盖它们。
<小时/>对于使用 Material-UI v5 的用户,这里有一个 v5 示例(使用 styled
而不是 withStyles
):
import React from "react";
import ReactDOM from "react-dom";
import CardContent from "@mui/material/CardContent";
import { styled } from "@mui/material/styles";
const CardContentNoPadding = styled(CardContent)(`
padding: 0;
&:last-child {
padding-bottom: 0;
}
`);
function App(props) {
return (
<div>
<CardContentNoPadding style={{ border: "1px solid black" }}>
<div style={{ border: "1px solid red" }}>My Content</div>
</CardContentNoPadding>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
关于javascript - 无法从 Material UI 中的卡片内容中删除 padding-bottom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54236623/