using injectGlobal with class interpolation in emotion

[tokileecy]

I want to change sibling element styles when hover.

Example:
https://codesandbox.io/s/lingering-dawn-10onb

In the Balls.js, I generate root class by css,
and use injectGlobal to generate global classes by concatenating root class with other strings.
(To prevent the interpolation of className would not work in some case)

Finally, I export animation classes and composite them in the parent component App.js.

I'm wondering that is this usage would cause any problems or any other recommended solutions?

Any suggestion would be much appreciated!

[Andarist]

Well - we generally don't recommend things like this but also it should just work, especially when using @emotion/css.

[tokileecy]

ok, I get it, thank you!

So, Is there a proper way to stay animation styles in the child Component in this situation(hover on parent component)?