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

Question

https://codesandbox.io/s/yp9lmvwo1x 在这个沙箱中，您可以看到图标是一个箭头，并且旋转过渡非常好。然而，我使用

+ x

作为图标，并且我需要 45 度旋转。我如何实现这一目标？

Answer 1

在 ExpansionPanelSummary 源代码中，您可以找到控制此功能的默认样式的语法：

      '&$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 />}
        >

Answer 2

2024年答案：

<AccordionSummary
    expandIcon={<KeyboardArrowRight color="action" />}
    sx={{
      '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
           transform: 'rotate(90deg)'
       }
    }}
>