score:2

Accepted answer

i have a turnaround solution, which works (not that pretty). you would turn your withstyles into a currying function, that takes keyframesprops, and at your key frame definition you would use an iife that returns the object with its properties:

const usestyles = keyframesprops => makestyles((theme) => ({
   ... all other styles,
   // you need to call an iife because keyframes doesn't receive a function
  "@keyframes spinners": ((props) => ({
    "25%": {
      transform: `translatex(${props.translate}px) rotate(-90deg) scale(.5)`
    },
    "50%": {
      transform: `translatex(${props.translate}px) translatey(${props.translate}px) rotate(-180deg)`
    },
    "75%": {
      transform: `translatex(0) translatey(${props.translate}px) rotate(-270deg) scale(.5)`
    },
    to: {
      transform: `rotate(-1turn)`
    }
  }))(keyframesprops)
}));

at your component you would define your classes like:

  const styleprops = {
    duration: duration,
    size: size,
    color: color
  }

  const framesprops = {
    translate: size * (1 - 0.3125)
  }
  const classes = usestyles(framesprops)(styleprops);

keyframes-hack

score:1

it sounds that mui has a bug around props in makestyles @keyframes #16673 as olivier tassinari stated, this bug will be fixed in v5 where mui gonna use a new styling solution styled-components rcf #22342.

the problem is even more general:
the arrow functions (with or without props) do not work within makestyles #21011

passing the props to rules in your defined keyframes will fix it (after v5 has been available, hopefully)

"@keyframes spinners": {
    "25%": {
      transform: (props) =>
        // console.log(props) and template generation will be created correctly.
        `translatex(${props.translate}px) rotate(-90deg) scale(.5)`
    },
    // ...
  }

until then you can use higher-order usestyle creator for embedding your keyframes, as @buzatto suggested.

or define your animation presets in your theme object and uses them globally around your project.

const theme = createmuitheme({
  animation: {
    presets: {
      duration: 180,
      // or even function
      rotatedeg: (angle) => `{angle}deg`
      //...
    }
  }
});


// usage
const usestyles = makestyles(theme => ({
  "@keyframes spinners": {
    "25%": {
      transform: `translatex(${
        theme.animation.presets.duration * 10
      }px) rotate(${theme.animation.presets.rotatedeg(-90)}) scale(.5)`,
    },
  },
}

Related Query

More Query from same tag