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

问题

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?

回答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

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

来源：https://stackoverflow.com/questions/54056308/cant-override-a-style-of-a-deeply-nested-component-material-ui-jss-styling

标签

reactjs

material-ui

jss