无法覆盖深层嵌套组件的样式（Material-UI Jss Styling）

Question

Material-UI的ExpansionPanelSummary组件允许通过expandIconprop 在其内部渲染图标，并通过expandIconcss类更改其样式。在组件
的实现中可以看到，该类具有嵌套类，该类添加了transform：

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

无法通过组件的API访问此嵌套类，我需要重写它。
我已经尝试使用jss-nested插件来执行此操作，如此处所述，并使用classesprop进行覆盖：

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

该&$语法在同一样式表中引用了一条规则，您需要创建一个扩展的规则并将其传递给classes对象，例如

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