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

IT技术 reactjs material-ui jss
2021-05-26 17:49:03

Material-UI 的 ExpansionPanelSummary 组件允许通过expandIconprop在其中渲染图标，并通过expandIconcss 类更改其样式。
正如您在组件的实现中所见，该类具有添加变换的嵌套类： 

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

无法通过组件的 API访问这个嵌套类，我需要覆盖它。
我尝试使用 jss-nested 插件来做到这一点，如here所述，并用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.

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

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

为了在扩展时覆盖图标的 CSS 样式，您需要向 theExpansionPanelSummery和 the添加类ExpandMoreIcon（这是您所缺少的）。

const styles = theme => ({
  expanded: {
    "& $icon": {
      transform: "translateY(-50%) rotate(90deg)"
    }
  },
  icon: {}
});
<ExpansionPanelSummary
    expandIcon={<ExpandMoreIcon classes={{ root: classes.icon }} />}
    classes={{ expanded: classes.expanded }}
>
其它你可能感兴趣的问题
上一篇浏览器与插件对独立组件做出react，可由插件使用 下一篇对象作为 React 子对象无效（找到：[object Promise]）。如果您打算渲染一组子项，请改用数组