如何在 MUI v5 中旋转组件？

Question

我有一个 svg 组件：

export const Spinner = ({ color, size }) => (
  <svg ref={ref} version="1.0" 
    width={size} height={size} viewBox="0 0 150.000000 150.000000"
    preserveAspectRatio="xMidYMid meet">

    <g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
      fill={color} stroke="none">
      <path d="M520 1476 c-240 -84 -422 -277 -492 -522 -29 -102 -31 -276 -4 -374
58 -214 197 -384 390 -479 80 -40 187 -71 236 -70 14 0 -2 6 -35 14 -328 71
-556 354 -556 688 0 122 16 191 73 307 33 68 58 102 127 171 73 73 101 93 181
132 52 25 111 48 130 52 72 14 100 53 64 89 -20 21 -35 20 -114 -8z"/>
      <path d="M708 23 c12 -2 32 -2 45 0 12 2 2 4 -23 4 -25 0 -35 -2 -22 -4z" />
    </g>
  </svg>
);

我试图将它的样式设置为旋转，如下所示：

export const StyledSpinner = styled(Spinner)(({ theme }) => ({
  animation: 'LoaderSpin infinite 700ms linear',
  transformBox:'fill-box',

  "@keyframes LoaderSpin": {
    from: {
      transform: "rotate(0deg)"
    },
    to: {
      transform: "rotate(360deg)"
    },
  }
}))

但我失败了。 如果我使用固定颜色和固定大小保存此 svg，并将其样式设置如下：

import Image from 'next/image';
export const SpinningImage = styled(Image)(({ theme }) => ({
  animation: 'nfLoaderSpin infinite 700ms linear',
  
  "@keyframes nfLoaderSpin": {
    from: {
      transform: "rotate(0deg)"
    },
    to: {
      transform: "rotate(360deg)"
    },
  }
}))

并在这样的 jsx 文件中使用它：

<StyledSpinner
  color={theme.palette.secondary.main}
  size={300}
/>

它确实旋转。 我的问题是：如何旋转上述 SVG 组件？

Answer 1

样式已生成，但您需要将className传递给您的 svg 组件，以便可以应用它：

const Spinner = ({ color, size, className /* <---------------------- Add this */ }) => {
  return (
    <svg className={className} {...} />
  );
}

const StyledSpinner = styled(Spinner)(({ theme }) => ({
  animation: `nfLoaderSpin infinite 700ms linear`,
  transformBox: "fill-box",

  "@keyframes nfLoaderSpin": {
    from: {
      transform: "rotate(0deg)"
    },
    to: {
      transform: "rotate(360deg)"
    }
  }
}));