如何旋转material-ui图标

Question

我正在尝试使用 css 属性旋转 Material-ui 图标animation，但没有得到所需的结果。有人可以帮我确定这里出了什么问题吗？

https://codesandbox.io/s/nifty-nightingale-v8sqh?file=/App.tsx

我的期望是一个连续旋转的图标。

Answer 1

这是新sx道具的另一种方式，这是新的MUI v5

import LoopIcon from '@mui/icons-material/Loop';
<LoopIcon
  sx={{
    animation: "spin 2s linear infinite",
    "@keyframes spin": {
      "0%": {
        transform: "rotate(360deg)",
      },
      "100%": {
        transform: "rotate(0deg)",
      },
    },
  }}
/>

Answer 2

你快到了！您可以将这两种rotateIcon样式保留为定义@keyframes spin中的样式createStyles。诀窍是在前面添加spin一个 $ 符号，这样它就出现了$sign。然后它将起作用：

import React from "react";
import { Container, createStyles, makeStyles } from "@material-ui/core";
import LoopIcon from "@material-ui/icons/Loop";

export const useStyles = makeStyles(() =>
  createStyles({
    rotateIcon: {
      animation: "$spin 2s linear infinite"
    },
    "@keyframes spin": {
      "0%": {
        transform: "rotate(360deg)"
      },
      "100%": {
        transform: "rotate(0deg)"
      }
    }
  })
);

export default function App() {
  const classes = useStyles();
  return (
    <Container maxWidth="sm">
      <LoopIcon className={classes.rotateIcon} />
    </Container>
  );
}