Material-UI Theme Override Issue

Question

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

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