Add CSS Keyframe Animation To A "styled" Material UI component [React, Material UI, JSS]

Question

I'm trying to add a CSS keyframe animation to my Material UI styled component but adding a keyframe animation seems to throw an error. Here's what my code looks like:

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,
}));

This code returns the following error:

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]

Is there a solution to use @keyframes inside of a styled component like this?

Note: I'm using Material UI's built in styles API and not styled components.

Zehe

Did you ever find the solution to this? – Transpicuous

any luck with this? – Mcgrew

Answer 1

You declared the animation with pulsate then called it with plusate... Fix that first! Then try removing the $ from the animation name.

I'm not sure which version of Material-UI you're using, but for MUI v5 this works:

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

Mcgrew