小编Oro*_*ron的帖子

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

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

'&$expanded': {
     transform: 'translateY(-50%) rotate(180deg)',
 },
Run Code Online (Sandbox Code Playgroud)

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

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

<ExpansionPanelSummary
     expandIcon={<ExpandMoreIcon />}
     classes={{
         expandIcon: classes.expandIcon
     }}
 >
Run Code Online (Sandbox Code Playgroud)

但它不起作用,并且我在控制台中收到此警告:

Warning: [JSS] Could not find the referenced rule expanded in MyExpansionPanel.  
Run Code Online (Sandbox Code Playgroud)

您可以在此处查看实时代码和框示例。
我想念什么吗?

reactjs material-ui jss

4
推荐指数
1
解决办法
715
查看次数

标签 统计

jss ×1

material-ui ×1

reactjs ×1