Emotion: How to get the CSS prop working with react-spring?
react-spring is currently the go-to for animation in React, could there be any way to get it working with emotion's CSS prop? https://github.com/react-spring/react-spring/issues/421
desmap
All 3 comments
I've fixed your demo here: https://codesandbox.io/s/20q8wroxxr
The key is to use the style prop for the dynamic styles and the css prop for your element's base styles. The values given to the css prop are converted to a className prop that is applied to the element. react-spring does not have access to the lower level styles so it cannot modify them unless it uses emotion itself.
Also, you were using the wrong css property for your margin-left value which was causing it to never work. I've fixed that as well.
tkh44
on 7 Jan 2019
Thanks for the quick response and the explanation.
... unless it uses emotion itself.
would this have some performance impact?
desmap
on 7 Jan 2019
For styles that change rapidly over a short amount of time, the style prop is recommended. Each time a property value changes it will change the generated class name value. For the best performance its better to keep a static class name with the values that do not change and then update the few changing values via the style prop. They could certainly use emotion and accept the css prop but I wouldn't advise it.
tkh44
on 7 Jan 2019
Related issues
MrFungusEli
路
3Comments
rumsky
路
3Comments
tkh44
路
3Comments
bitttttten
路
3Comments
rockmandash
路
3Comments
Most helpful comment
For styles that change rapidly over a short amount of time, the style prop is recommended. Each time a property value changes it will change the generated class name value. For the best performance its better to keep a static class name with the values that do not change and then update the few changing values via the style prop. They could certainly use emotion and accept the css prop but I wouldn't advise it.