Can't override a style of a deeply nested component (Material-UI Jss Styling)

user_10872093 0
Viewed 2895

Material-UI's ExpansionPanelSummary component allows to render an icon inside it via the expandIcon prop, and to change its style by the expandIcon css class.
As you can see in the implementation of the component, this class has nested class which adds transform: 

'&$expanded': {
     transform: 'translateY(-50%) rotate(180deg)',
 },

There is no access to this nested class via component's API, and my need is to override it.
I have tried to do this with jss-nested plugin as described here and override with classes prop: 

expandIcon: {
    "&$expanded": {
        transform: "translateY(-50%) rotate(90deg)"
    }
}

<ExpansionPanelSummary
     expandIcon={<ExpandMoreIcon />}
     classes={{
         expandIcon: classes.expandIcon
     }}
 >

But it not works, and I got this warning in the console: 

Warning: [JSS] Could not find the referenced rule expanded in MyExpansionPanel.

You can see live codesandbox example here.
Am i missing something?

jss material-ui reactjs
2 Answers

The &$ syntax references a rule in the same style sheet, you need to create an expanded rule and pass it into the classes object e.g.

const styles = theme => ({
  expandIcon: {
    "&$expanded": {
      transform: "translateY(-50%) rotate(90deg)"
    }
  },
  expanded: {},
});

<ExpansionPanelSummary
  expandIcon={<ExpandMoreIcon />}
  classes={{
    expandIcon: classes.expandIcon,
    expanded: classes.expanded,
  }}
>

Codesandbox example: https://codesandbox.io/s/x256q3xz44

user_108698110

In order to override CSS style of the icon on expansion, you need to add classes to both the ExpansionPanelSummery and the ExpandMoreIcon (this is what you are missing).

const styles = theme => ({
  expanded: {
    "& $icon": {
      transform: "translateY(-50%) rotate(90deg)"
    }
  },
  icon: {}
});
<ExpansionPanelSummary
    expandIcon={<ExpandMoreIcon classes={{ root: classes.icon }} />}
    classes={{ expanded: classes.expanded }}
>
user_107632020
Related