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

Question

Material-UI 的 ExpansionPanelSummary 组件允许通过 expandIcon 属性在其中呈现一个图标，并通过 expandIcon css class.
正如您在 implementation of the component 中看到的，此 class 嵌套了 class，它添加了转换：

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

无法通过 component's API 访问此嵌套 class，我需要覆盖它。
我尝试使用 jss 嵌套插件 as described here 并使用 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.

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

Answer 1

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

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

Answer 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 }}
>

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

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

reactjs

material-ui

jss