无法覆盖深度嵌套组件的样式（Material-UI Jss 样式）答案

【问题标题】：Can't override a style of a deeply nested component (Material-UI Jss Styling)无法覆盖深度嵌套组件的样式（Material-UI Jss 样式）
【发布时间】：2019-06-01 01:12:59
【问题描述】：

Material-UI 的 ExpansionPanelSummary 组件允许通过 expandIcon 属性在其中呈现图标，并通过 expandIcon css 类更改其样式。
正如你在implementation of the component 中看到的那样，这个类有嵌套类，它添加了变换：

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

无法通过component's API 访问这个嵌套类，我需要覆盖它。
我尝试使用 jss 嵌套插件 as described here 来执行此操作，并使用 classes 属性覆盖：

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.

您可以查看实时代码框示例here。
我错过了什么吗？

【问题讨论】：

标签： reactjs material-ui jss

【解决方案1】：

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

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

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

代码沙盒示例：https://codesandbox.io/s/x256q3xz44

【讨论】：

【解决方案2】：

为了在展开时覆盖图标的 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 }}
>

【讨论】：