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

【问题标题】：Add CSS Keyframe Animation To A "styled" Material UI component [React, Material UI, JSS]将 CSS 关键帧动画添加到“样式化”的 Material UI 组件 [React, Material UI, JSS]
【发布时间】：2021-05-13 12:27:19
【问题描述】：

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

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，而不是样式化组件。

【问题讨论】：

你找到解决办法了吗？
这个运气好吗？

标签： css reactjs material-ui jss

【解决方案1】：

您使用pulsate 声明动画，然后使用plusate 调用它...首先修复它！然后尝试从动画名称中删除$。

我不确定您使用的是哪个版本的 Material-UI，但对于 MUI v5 可以：

const Keyframes = styled("div")({
  "@keyframes pulsate": {
    from: {
      opacity: 1,
      transform: "scale(1)"
    },
    to: {
      opacity: 0,
      transform: "scale(2)"
    }
  },
  animation: "pulsate 1s infinite ease",
});

Above code in a working sandbox

Another example I found in the MUI docs

【讨论】：