Question

我要覆盖Material UI中的<ExpansionPanelSummary/>组件以减少边距。我正在使用带有替代内容的主题来做到这一点。

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

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

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

Material-UI主题覆盖问题

1 个答案: