Material-UI 主题覆盖问题答案

【问题标题】：Material-UI Theme Override IssueMaterial-UI 主题覆盖问题
【发布时间】：2019-03-14 11:15:48
【问题描述】：

我正在覆盖 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;
}

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

【问题讨论】：

好的，我有一个解决方法，但它仍然不能完全回答我的问题。我可以使用“5px！important”而不是使用数字 5 作为覆盖，但是这仍然没有为使用两个类创建规则。

标签： reactjs styles themes material-ui

【解决方案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>
  );
}

【讨论】：