Material-ui: [styles] Switching to @material-ui/styles broke my react-transition-group animation

[newsiberian]

Hi, after switching to @material-ui/[email protected] from @material-ui/core my animation doesn't work anymore. This happens because all classes now has random suffixes. like here:

So, the way I did it before:

const fadeInUp = randomize('a', 10);

...
'fadeIn-entering': {
  animation: `${fadeInUp} .2s ease-in`,
},
[`@keyframes ${fadeInUp}`]: {
    from: {
      ...
    },
    to: {
      ...
    },
  },
...

doesn't work since keyframe name is not the same that I expecting.
Here is a reproduction: https://codesandbox.io/s/nnjp98590

Is there any patterns how to work with keyframes in new styles?

---

1. Read the documentation: https://material-ui.com/.
2. Ask questions on StackOverflow using the tag material-ui: https://stackoverflow.com/questions/tagged/material-ui.
3. Chat with the community on Gitter: https://gitter.im/mui-org/material-ui.
4. Ping us on Twitter: https://twitter.com/MaterialUI.

[joshwooding]

With JSSv10 keyframes are now scoped.

https://github.com/cssinjs/jss/blob/master/changelog.md#breaking-changes
https://github.com/cssinjs/jss/issues/346

https://codesandbox.io/s/m4zy6v09wj

[newsiberian]

@joshwooding , thank you. issue solved.

[bflemi3]

@joshwooding Code Sandbox link is 404

[joshwooding]

@bflemi3 Sorry, I tend to delete sandboxes fairly regularly due to the limit. This is what it was https://codesandbox.io/s/nuw9t I guess I should donate and remove the limit 🤔