css - 使用 SX 属性创建动画 - MUI v5

Question

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

想知道你们有什么建议吗？ 我尝试向我的 SX 添加“@keyframes spin”属性，但它没有执行任何操作，即:

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

我尝试使用 MUI v5 的 SX 属性创建动画，其逻辑与样式组件相同 但失败了:(

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

Answer 1

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

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

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

希望这对您有帮助...