Material-ui: Override style classes should always have the highest priority

[darkowic]

CSS classes provided to a component to override its styles should always have the highest priority.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Classes provided to component have always the highest priority.

Current Behavior 😯

Custom MUI classes like Mui-expanded have in v4 highest priority than classes provided to component.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/material-demo-2fh3p

This is my component styling expansion panel:

const StyledExpansionPanel = styled(ExpansionPanel)`
  margin: auto;
`;

in MUI version 3 it was working fine - when expanded the margin was correctly applied.

v4 - Mui-expanded has higher priority than my custom class...

class="MuiPaper-root MuiPaper-elevation1 MuiExpansionPanel-root sc-gzVnrw uVrkT Mui-expanded MuiExpansionPanel-rounded MuiPaper-rounded"

v3 (minimized) - custom classes have highest priority

jss1142 jss1145 jss1143 jss1138 jss1140 jss1139 jss96 jss104 jss128 StyledExpansionPanel-lkSmIp izVvji

Context 🔦

I want to override component styles.

| Tech | Version |
|--------------|---------|
| Material-UI | v4.2.0 |
| React | 16.8 |
| Browser | any |
| TypeScript | no |
| styled-components | 4.3 |

[oliviertassinari]

@darkowic This is expected, see https://material-ui.com/customization/components/#pseudo-classes.

const StyledExpansionPanel = styled(ExpansionPanel)`
  margin: 2px;

  &.Mui-expanded {
    margin: 4px;
  }
`;

[darkowic]

Thank you. I was not sure how to use it...