Can't override a style of a deeply nested component (Material-UI Jss Styling)
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