[styles] Arrow functions (with or without props) do not work within makeStyles for @keyframes

[sagarsys]

I want to dynamically generate an @keyframes animation using the makeStyles helper.
I want to access props within makeStyles to generate this css keyframes.
However, it does not seem to work.

• [x ] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate. Might be linked to [styles] makeStyles + @media + Adapting based on props: not updating correctly #20446 & [styles] withStyles - makeStyles - Can't use props (function) in nested styles  #20355

Current Behavior 😯

Passing an arrow function (with or without props) to @keyframes does not generate the animation.

const useStyles = makeStyles({
  ...,
  [`@keyframes failsWithProps`]: props => ({
    from: { opacity: props.opacity },
    to: { opacity: 0 }
  }),
})

export function MyComponent() {
  const classes = useStyles({ opacity: 0.9 })
}

Expected Behavior 🤔

Being able to use props to generate @keyframes rules
There is a workaround for dynamically generating@keyframes with the es6 spread operator, but it does not work with props.

Steps to Reproduce 🕹

Live example (CodeSandox)

Steps:

1. Use an arrow function to generate @keyframes animation

Context 🔦

I want to create dynamic animation rules, based on a number of items that is being rendered. So I want to be able to use props within the component to define the resulting animation.

Right now, within makeStyles, I have to use:

    [`@keyframes change-text`]: {
        ...generateTextLineChangeKeyFrameAnimation(4),
    },

but I want to be able to use:

    [`@keyframes change-text`]: props => generateTextLineChangeKeyFrameAnimation(props.numLines),

and within MyComponent:

export function MyComponent() {
  const items = [ 1, 2, 3, 4 ] // dynamic values
  const classes = useStyles({ numLines: items.length })
  return (...)
}

Your Environment 🌎

Tech	Version
Material-UI	v4.9.13
React	v16.13.1
Browser	Chrome v81.0.4044.138

[oliviertassinari]

An update, this issue is being resolved in v5 thanks to #22342 and the new @material-ui/styled-engine package: https://codesandbox.io/s/wizardly-meadow-r0h7w?file=/src/App.js.

const getAnimation = (props) => keyframes`
  0% {
    opacity: props.opacity;
  }
  100% {
    opacity: 0;
  }
`;

const H2 = styled("h2")((props) => ({
  animation: `${getAnimation(props)} 1s infinite`
}));

[oliviertassinari]

An update, we have now made enough progress with the new @material-ui/styled-engine package in v5 to move toward a progressive removal of the @material-ui/styles package (based on JSS). The current plan:

• In v5.0.beta.0, this package will come standalone, in complete isolation from the rest.
• In v5.0.0, this package will be soft deprecated, not promoted in the docs, nor very actively supported.
• During v5, work on making the migration easier to the new style API (sx prop + styled() API). We might for instance, invest in the documentation for using react-jss that has more or less the same API. We could also invest in an adapter to restore the previous API but with emotion, not JSS.
• In v6.0.0, this package will be discontinued (withStyles/makeStyles API).

This was made possible by the awesome work of @mnajdova.

[oliviertassinari]

For the usage of keyframe, you have examples in the source:

https://github.com/mui-org/material-ui/blob/4424142f562df9c1f2ea834956c37840f3da53b9/packages/material-ui/src/CircularProgress/CircularProgress.js#L83-L87