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

Question

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?

Pilarpilaster

Answer 1

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

Gambrell

Answer 2

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 }}
>

Thwack