I want to dynamically generate a @keyframes animation using the makeStyles helper from react mui. I want to access props to generate this css keyframes. However, it does not seem to work.
What I have tried - simplified example (Link to CodeSandox):
const useStyles = makeStyles({
h1: {
animation: "$works 1s infinite"
},
h2: {
animation: "$failsWithProps 1s infinite"
},
h3: {
animation: "$workAround 1s infinite"
},
h4: {
animation: "$workAroundFailsWithProps 1s infinite"
},
[`@keyframes works`]: {
from: { opacity: 1 },
to: { opacity: 0 }
},
[`@keyframes failsWithProps`]: props => ({
from: { opacity: props.opacity },
to: { opacity: 0 }
}),
[`@keyframes workAround`]: {
...workAround(0.9)
},
[`@keyframes workAroundFailsWithProps`]: props => ({
...workAroundFailsWithProps(props)
})
});
function workAround(opacity) {
return {
from: { opacity },
to: { opacity: 0 }
};
}
function workAroundFailsWithProps(props) {
return {
from: { opacity: props.opacity },
to: { opacity: 0 }
};
}
export default function App() {
const classes = useStyles({ opacity: 0.9 });
return (
<div className="App">
<h1 className={classes.h1}>works</h1>
<h2 className={classes.h2}>failsWithProps</h2>
<h3 className={classes.h3}>workAround</h3>
<h4 className={classes.h4}>workAroundFailsWithProps</h4>
</div>
);
}