Reactjs 传递道具时JSS关键帧不起作用

我有一个微调器组件，基本上是一个加载图标。我试图将道具传递给JSS样式，以便可以对其进行定制。但是如果我将道具传递给关键帧，动画似乎不起作用

下面是组件。当我使用动画

$spinnertest

时，效果很好。如果我使用

$spinners

，它不会加载动画（在检查元素时，

动画名称

甚至不会显示在类中，这让我相信它不会生成）

**示例代码沙盒问题（只需将动画更改为

微调器

）：

const useStyles=makeStyles（主题=>({
root:props=>({
宽度：道具尺寸，
高度：道具尺寸，
位置：'相对'，
包含：“油漆”，
显示：“内联块”，
}),
微调器：道具=>({
宽度：道具尺寸*0.3125，
高度：道具。尺寸*0.3125，
背景：道具颜色，
位置：'绝对'，
动画持续时间：道具持续时间，
animationIterationCount:'无限'，
animationTimingFunction:“缓进缓出”，
}),
自旋生成：{
animationName:“$spinners”，
},
平方2：道具=>({
动画延迟：-props.duration/2，
}),
“@keyframes spinnertest”：{
'25%': {
变换：“translateX（22px）旋转（-90度）比例（.5）”，
},
'50%': {
变换：“translateX（22px）translateY（22px）旋转（-180度）”，
},
'75%': {
变换：“translateX（0）translateY（22px）旋转（-270度）比例（.5）”，
},
“致”：{
变换：“旋转（-1圈）”，
},
},
“@keyframes微调器”：道具=>({
'25%': {
transform:`translateX（${props.translate}px）旋转（-90度）比例（.5）`，
},
'50%': {
transform:`translateX（${props.translate}px）translateY（${props.translate}px）旋转（-180度）`，
},
'75%': {
transform:`translateX（0）translateY（${props.translate}px）旋转（-270度）比例（.5）`，
},
“致”：{
变换：`rotate（-1turn）`，
},
}),
}));
导出默认函数微调器（道具）{
常量{持续时间、大小、颜色}=道具；
常量类=使用样式({
持续时间：持续时间，
尺寸：尺寸，
颜色：颜色，
翻译：尺寸*（1-0.3125），
});
返回(
)
}
Spinner.defaultProps={
持续时间：1800，
尺码：32，
颜色：#fff，
}

我有一个周转解决方案，它很有效（没有那么漂亮）。您可以将

with styles

转换为一个currying函数，该函数使用

keyframesProps

，并在关键帧定义处使用一个iLife返回对象及其属性：

const useStyles = keyframesProps => makeStyles((theme) => ({
   ... all other styles,
   // you need to call an IIFE because keyframes doesn't receive a function
  "@keyframes spinners": ((props) => ({
    "25%": {
      transform: `translateX(${props.translate}px) rotate(-90deg) scale(.5)`
    },
    "50%": {
      transform: `translateX(${props.translate}px) translateY(${props.translate}px) rotate(-180deg)`
    },
    "75%": {
      transform: `translateX(0) translateY(${props.translate}px) rotate(-270deg) scale(.5)`
    },
    to: {
      transform: `rotate(-1turn)`
    }
  }))(keyframesProps)
}));

在组件中，您可以定义

类

如下：

  const styleProps = {
    duration: duration,
    size: size,
    color: color
  }

  const framesProps = {
    translate: size * (1 - 0.3125)
  }
  const classes = useStyles(framesProps)(styleProps);

---

听起来MUI在makeStyles

@keyframes

正如Olivier Tassinari所说，这个bug将在v5中修复，MUI将在v5中使用新的样式化解决方案

样式化组件

问题更为普遍：
箭头功能（带或不带道具）在makeStyles中不起作用

将道具传递给定义的关键帧中的规则将修复它（希望在v5可用之后）

在此之前，您可以使用更高阶的useStyle creator来嵌入关键帧，正如@buzatto所建议的那样

或者在主题对象中定义动画预设，并在项目中全局使用它们

const theme = createMuiTheme({
  animation: {
    presets: {
      duration: 180,
      // or even function
      rotateDeg: (angle) => `{angle}deg`
      //...
    }
  }
});


// usage
const useStyles = makeStyles(theme => ({
  "@keyframes spinners": {
    "25%": {
      transform: `translateX(${
        theme.animation.presets.duration * 10
      }px) rotate(${theme.animation.presets.rotateDeg(-90)}) scale(.5)`,
    },
  },
}

---

当我这样做时，JSS只将

渲染到

帧，因为它没有道具。是的@cclloyd，我更新了发生这些情况的简要介绍

"@keyframes spinners": {
    "25%": {
      transform: (props) =>
        // console.log(props) and template generation will be created correctly.
        `translateX(${props.translate}px) rotate(-90deg) scale(.5)`
    },
    // ...
  }

const theme = createMuiTheme({
  animation: {
    presets: {
      duration: 180,
      // or even function
      rotateDeg: (angle) => `{angle}deg`
      //...
    }
  }
});


// usage
const useStyles = makeStyles(theme => ({
  "@keyframes spinners": {
    "25%": {
      transform: `translateX(${
        theme.animation.presets.duration * 10
      }px) rotate(${theme.animation.presets.rotateDeg(-90)}) scale(.5)`,
    },
  },
}