Material-UI的ExpansionPanelSummary组件允许通过expandIcon
道具在其中渲染图标,并通过expandIcon
css类更改其样式。
如您在implementation of the component中所见,该类具有嵌套类,该类添加了transform:
'&$expanded': {
transform: 'translateY(-50%) rotate(180deg)',
},
无法通过component's API访问此嵌套类,我需要重写它。
我尝试使用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。
我想念什么吗?
答案 0 :(得分: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
答案 1 :(得分:1)
为了覆盖扩展图标的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 }}
>