材料 UI 主题覆盖问题

Question

我正在覆盖材料UI中的<ExpansionPanelSummary/>组件以减少边距。 我正在使用带有覆盖的主题来执行此操作。

const theme = createMuiTheme({
overrides: {
MuiExpansionPanelSummary: {
expanded: {
marginTop: 5,
marginBottom: 5,
},
content: {
marginTop: 5,
marginBottom: 5,
},
}
},

然而，我遇到的问题是，在 css 内置的 Material-UI 中，同时应用了两个类：内容类和扩展类。

.MuiExpansionPanelSummary-content-567.MuiExpansionPanelSummary-expanded-564 {
margin: 20px 0;
}

如何覆盖多个应用的类？ 是否可以为此创建主题规则？

Answer 1

今天让它工作。您想要的边距位于内容expanded类上，因此规则需要如下所示才能获得更高的 CSS 特异性。寻找'&.expanded'.

const useStyles = makeStyles(theme => ({
expansionPanelSummaryContent: {
backgroundColor: 'red',
'&.expanded': {
margin: 0,
backgroundColor: 'yellow',
},
},
}));
export default function MyComponent(props) {
const classes = useStyles();
return (
<ExpansionPanel expanded={props.expanded}>
<ExpansionPanelSummary
classes={{
content: classes.expansionPanelSummaryContent,
expanded: 'expanded'
}}
>
...
</ExpansionPanelSummary>
</ExpansionPanel>
);
}