reactjs - 扩展面板图标转换(Mat. UI)

Question

https://codesandbox.io/s/yp9lmvwo1x在这个沙盒中，您可以看到图标是一个箭头，旋转过渡非常好。但是，我为图标使用了 + x，我需要旋转 45 度。我如何实现这一点？

Answer 1

在ExpansionPanelSummary source code你可以找到控制它的默认样式的语法:

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

您可以使用以下方法获得 45 度旋转:

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

然后在 JSX 中:

<ExpansionPanelSummary
          classes={{
            expandIcon: classes.expandIcon,
            expanded: classes.expanded
          }}
          expandIcon={<ExpandMoreIcon />}
        >