reactjs - Material-UI 主题覆盖问题

Question

我正在覆盖 <ExpansionPanelSummary/> Material UI 中的组件具有较少的边距。我正在使用具有覆盖功能的主题来执行此操作。

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

但是我遇到的问题是，在 CSS 内置的 Material-UI 中，同时应用了两个类:content 和 expanded。

.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>
  );
}