在React中的Material UI中放置边框

Question

如何在React中的Material UI中仅在标高为0的情况下放置边框？下面的代码当然会在所有卡片上加上边框。

const theme = createTheme({
components: {
MuiCard: {
styleOverrides: {
root: {
border: `1px solid green`,
position: "relative",
zIndex: 0,
},
},
},
},
});

Answer 1

如果你有一个特定的提升，你会注意到你的css类有一个特殊的样式

<Card elevation={4}>

你会得到一个像.MuiPaper-elevation4这样的类

如果使用elevation={0}，则Card组件将获得默认类MuiPaper-elevation0。因此，您可以针对此类添加所需的边框，并且只有那些Card组件才会受到影响。

将其添加到您的主题中(从MuiCard主题覆盖中删除边框(

MuiCard: {
styleOverrides: {
root: {
// border: `1px solid green`,
position: "relative",
zIndex: 0,
},
},
},
MuiPaper: {
styleOverrides: {
elevation0: {
border: '1px solid green'
},
},
},

Then by using <Card elevation={0}>仅在这种情况下，您将有一个边界(这是一个经过测试的解决方案(

这是一个url，可以帮助您处理主题中可以覆盖的所有类https://mui.com/material-ui/api/paper/