使用 SX 属性创建 animation - MUI v5

Question

我正在尝试创建一个旋转的 svg 的 animation 作为加载程序，在线查看我已经看到一些使用 Styled 组件执行此操作的示例，该组件已被弃用。

想知道你们是否有建议？ 我尝试向我的 SX 添加一个“@keyframes spin”属性，但它没有做任何事情，IE：

<Box
 sx={{ 
 animation: '$test 1s linear infinite',
 '@keyframes spin': {
   from: {
    transform: 'rotate(0dg)'
  },
   to: {
    transform: 'rotate(360dg)'
  }
 }
}}
>

我尝试用 MUI v5 的 SX 属性创建一个 animation，其逻辑与 Styled 组件相同，但失败了:(

我想知道我们是否可以在不使用 CSS 文件和 class 的情况下实现它......

Answer 1

使用 MUI5，在 SX 道具上添加关键帧时效果很好 这是我的示例

            <Box sx={{
                "@keyframes width-increase": {
                    "0%": {
                        width: "100px"
                    },
                    "100%": {
                        width: "300px"
                    }
                },
                width: "100px",
                height: "50px",
                backgroundColor: "red",
                animation: "width-increase 1s ease infinite",
            }}></Box>

确保在使用前初始化关键帧。

希望对你有帮助...