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

时间:2019-01-05 21:12:01

标签: reactjs material-ui jss

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
我想念什么吗?

2 个答案:

答案 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样式,您需要同时向ExpansionPanelSummeryExpandMoreIcon添加类(这是您所缺少的)。

const styles = theme => ({
  expanded: {
    "& $icon": {
      transform: "translateY(-50%) rotate(90deg)"
    }
  },
  icon: {}
});
<ExpansionPanelSummary
    expandIcon={<ExpandMoreIcon classes={{ root: classes.icon }} />}
    classes={{ expanded: classes.expanded }}
>