Material-UI Theme Override Issue

Question

I am overriding the <ExpansionPanelSummary/> component in Material UI to have less margin. I am using a theme with overrides to do this.

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

The problem I run into however is that in the Material-UI built in css, there are two classes being applied at the same time: content and expanded .

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

How can I override multiple applied classes? Is it possible to create a theme rule for this?

Answer 1

Got this working today. The margin you want is on the expanded class on content, so the rules need to look like this to get higher CSS specificity. Look for '&.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>
  );
}