reactjs - วิธีหมุนไอคอน material-ui

ฉันกำลังพยายามหมุนไอคอน material-ui ด้วยคุณสมบัติ CSS animation แต่ไม่ได้ผลลัพธ์ตามที่ต้องการ ใครสามารถช่วยฉันระบุว่ามีอะไรผิดพลาดตรงนี้ได้ไหม?

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

ความคาดหวังของฉันคือไอคอนที่หมุนต่อเนื่อง

คำตอบ #1

นี่คือตัวเลือกทางเลือกอีกวิธีหนึ่งโดยใช้ prop 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)",
      },
    },
  }}
/>

คำตอบ #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>
  );
}