0
const animation = useSpring({
  backgroundColor: hasBeenClicked ? 'green' : 'white',
  color: hasBeenClicked ? 'white' : '#7D7D7D',
});

When using a simple useSpring it looks like they require a from value and a to value. This requires that the JS defines the starting styling, which doesn't make sense to me. The developer needs to make sure this matches exactly what's already in the CSS for the element (in my case a custom button component from an imported library), and even worse if that style gets changed in the CSS elsewhere, then the CSS being defined as from on useSpring will always override it, which is sort of a maintainability nightmare.

How can I solve this issue without needing to specify the from value each time (and then needing to remember to update that if those styles changes elsewhere?

zeckdude
  • 15,877
  • 43
  • 139
  • 187
  • Use CSS in JS? Or use regular CSS for this, too, and just set classes from the JS. – jonrsharpe Mar 29 '20 at 08:46
  • I'm not sure what you mean. I am animating a button component from an imported library. I don't control the styling that is set by default. If I am required to provide the `from` values, then I always need to make sure that matches up to the styles in the imported library and that seems very fragile. – zeckdude Mar 29 '20 at 08:58

0 Answers0