Не удается переопределить стиль глубоко вложенного компонента (JSS Styling Material-UI)

Question

Компонент ExpansionPanelSummary Material-UI позволяет отображать значок внутри него с помощью expandIcon prop и изменять его стиль с помощью класса expandIcon css.
Как вы можете видеть в реализации компонента , этот класс имеет вложенный класс, который добавляет преобразование:

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

Нет доступа к этому вложенному классу через API компонента , и мне нужно переопределить его.
Я попытался сделать это с помощью jss-вложенного плагина , как описано здесь , и переопределить с помощью classes prop:

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

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

Но это не работает, и я получил это предупреждение в консоли:

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

Вы можете увидеть пример с живыми кодами и коробкой здесь .
Я что-то упустил?

Answer 1

Чтобы переопределить стиль CSS значка при расширении, вам нужно добавить классы как к ExpansionPanelSummery, так и к ExpandMoreIcon (это то, что вам не хватает).

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

Answer 2

Синтаксис &$ ссылается на правило в той же таблице стилей, вам нужно создать расширенное правило и передать его в объект классов, например,

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

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

Пример Codesandbox: https://codesandbox.io/s/x256q3xz44