铁路超高替代嵌套材质UI组件的样式

Question

我正在使用材料ui的card和cardContent组件。我同时拥有两个功能组件，并试图覆盖每个组件的根样式。然而，我不知道如何修改cardContent组件的css。这似乎是通过修改卡片的根样式。它不会让我修改cardcomponent的根样式。相反，我的css在检查器中显示为在中

.jss14 {
height: 100%;
display: flex;
padding: 0;
flex-direction: column;
justify-content: space-between;
}

而不是在.MuiCardContent-root中

使用makeStyles有没有遗漏什么？

我的尝试

import React from "react"
import { makeStyles } from "@material-ui/core/styles"
import CardContent from "@material-ui/core/CardContent"
const useStyles = makeStyles({
root: {
display: "flex",
justifyContent: "space-between",
flexDirection: "column",
height: "100%",
padding: 0,
},
})
export default function AccountCardContent(props) {
const classes = useStyles()
return <CardContent className={classes.root}> {props.children}</CardContent>
}

import React from "react"
import { makeStyles } from "@material-ui/core/styles"
import Card from "@material-ui/core/Card"
import AccountCardContent from "../AccountCardContent"
const useStyles = makeStyles({
root: {
width: "324px",
height: "194px",
borderRadius: "8px",
},
})
export default function AccountCard({ icon, title, description, onClick }) {
const classes = useStyles()
return (
<Card className={classes.root} onClick={onClick}>
<AccountCardContent>asdf</AccountCardContent>
</Card>
)
}

Answer 1

您的代码在很大程度上是正确的，您的问题与MUI或React无关，而是CSS的特殊性。您正试图覆盖

.MuiCardContent-root:last-child

并且添加的伪类导致比您的.jss14(开发中的makeStyles-root-14(类更高的特异性。理想情况下，你总是模仿你试图覆盖的选择器，在这种情况下：

root: {
// other styles
"&:last-child": {
paddingBottom: 0
}
}

如果有疑问，你可以通过在选择器中添加额外的&来逐步增加特异性，直到它起作用：

root: {
// other styles
"&&": {
paddingBottom: 0
}
}

Answer 2

基本上，Material UI组件接受可用于覆盖其样式的classes道具。

请在这里查看

所以你可以这样做：

<Card
classes={{
root: classes.root, // class name, e.g. `classes-nesting-root-x`
}}
>