将 CSS 关键帧动画添加到“样式化” Material UI 组件 [React、Material UI、JSS]

编程问答 2022-05-26

问题描述

我正在尝试向 Material UI styled 组件添加 CSS 关键帧动画，但添加关键帧动画似乎会引发错误。这是我的代码的样子：

const PulsatingCircle = styled("div")(({
  theme,}) => ({
  "@keyframes pulsate": {
    from: {
      opacity: 1,transform: "scale(1)",},to: {
      opacity: 0,transform: "scale(2)",background: theme.palette.primary.main,borderRadius: "100%",animation: "$plusate 1s infinite ease",position: "absolute",zIndex: -2,}));

此代码返回以下错误：

TypeError: container.addRule(...).addRule is not a function
Array.onProcessstyle
src/optimized-frontend/node_modules/jss-plugin-nested/dist/jss-plugin-nested.esm.js:93
  90 |   }));
  91 | } else if (isnestedConditional) {
  92 |   // Place conditional right after the parent rule to ensure right ordering.
> 93 |   container.addRule(prop,{},options) // Flow expects more options but they aren't required
     | ^  94 |   // And flow doesn't kNow this will always be a StyleRule which has the addRule method
  95 |   // $FlowFixMe[incompatible-use]
  96 |   // $FlowFixMe[prop-missing]

是否有在这样的样式组件中使用 @keyframes 的解决方案？

注意：我使用的是 Material UI 的内置 styles API 而不是样式组件。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jssmaterial-uireactjsreactjsreactjsreactjs