如何使用MUI v5的SX属性实现旋转SVG加载动画？

先纠正你代码里的两个明显问题：

• 单位写错了：rotate(0dg)应该是rotate(0deg)（正确单位是deg不是dg）
• MUI的SX属性不支持在单个元素的SX配置里直接定义@keyframes——SX本质是内联样式的扩展，而@keyframes属于样式表级别的规则，无法直接内联在元素上。

下面给你两种不用单独CSS文件或手动类名的可行方案：

方案一：使用MUI的keyframes工具函数（推荐） #

MUI提供了keyframes函数来创建作用域内的动画规则，直接在组件里定义和使用即可：

import { Box, keyframes } from '@mui/material';

// 定义旋转动画
const spinAnimation = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

// 组件中使用
function SpinningSvgLoader() {
  return (
    <Box
      sx={{
        animation: `${spinAnimation} 1s linear infinite`,
        width: 40, // 按需调整SVG尺寸
        height: 40,
        color: '#1976d2', // 按需设置SVG颜色
      }}
    >
      {/* 示例环形SVG加载动画，替换成你的SVG代码即可 */}
      <svg viewBox="0 0 24 24" fill="none">
        <circle
          cx="12"
          cy="12"
          r="10"
          stroke="currentColor"
          strokeWidth="2"
          strokeDasharray="50"
          strokeDashoffset="0"
          strokeLinecap="round"
        />
      </svg>
    </Box>
  );
}

方案二：在Theme中全局定义动画（适合多组件复用） #

如果需要在多个地方使用这个旋转动画，可以把它定义在MUI主题里，然后在SX中引用：

import { createTheme, ThemeProvider, Box } from '@mui/material';

// 创建自定义主题，添加旋转动画
const customTheme = createTheme({
  keyframes: {
    spin: {
      from: { transform: 'rotate(0deg)' },
      to: { transform: 'rotate(360deg)' },
    },
  },
  transitions: {
    animations: {
      spin: 'spin 1s linear infinite',
    },
  },
});

// 在ThemeProvider包裹的组件中使用
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Box
        sx={{
          animation: theme => theme.transitions.animations.spin,
          width: 40,
          height: 40,
        }}
      >
        {/* 你的SVG代码 */}
      </Box>
    </ThemeProvider>
  );
}

这两种方案都完全基于MUI的CSS-in-JS能力实现，不需要额外的CSS文件或手动管理类名。

内容的提问来源于stack exchange，提问作者k g