I'm facing an issue with adding a CSS keyframe animation to my Material UI custom styled component. Whenever I try to add a keyframe animation, it throws an error in my code setup:
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,
}));
The current code snippet triggers the following error message:
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 workaround for integrating @keyframes into a styled component using Material UI's styles API and not styled components?
Note: My implementation relies on Material UI's native styles API instead of styled components.