扩展面板图标转换（Mat. UI）

【问题标题】：Expansion Panel Icon Transitions (Mat. UI)扩展面板图标转换（Mat. UI）
【发布时间】：2019-09-25 18:46:00
【问题描述】：

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

【问题讨论】：

在哪里试试？这不会覆盖默认的 MUI 动画。
Ngl 不是一个很有帮助的答案/评论。我来这里是因为我无法在文档中找到这样做的方法。

【解决方案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 />}
        >

【讨论】：