如何旋转material-ui图标

Question

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

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

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

Answer 1

动画名称（初始沙盒中的“旋转”）必须引用一组关键帧。

一个直接的解决方案是直接定义关键帧（不理想，不整洁，不可扩展等），请参见下面样式标签中的关键帧。

您可能想查看 https://styled-components.com/docs/api#keyframes 以获得更简洁的解决方案。

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 4s linear infinite"
    }
  })
);

export default function App() {
  const classes = useStyles();

  return (
    <Container maxWidth="sm">
      <LoopIcon className={classes.rotateIcon} />
      <style>{`
            @keyframes spin {
                 0% { transform: rotate(360deg); }
                 100% { transform: rotate(0deg); }
            }
        `}</style>
    </Container>
  );
}

https://codesandbox.io/s/practical-fire-6k3cx?file=/App.tsx

Answer 2

你就快完成了！您可以在 createStyles 定义中同时保留 rotateIcon 样式和 @keyframes spin 样式。诀窍是在 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>
  );
}

Answer 3

这是新 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)",
      },
    },
  }}
/>

如何旋转material-ui图标

How to rotate material-ui icon

css-animations

typescript

reactjs

material-ui

react-hooks