Using CSS variables with styled components

Edit: I published react-css-variables, which makes defining CSS variables easy using a React component.

CSS variables are a game changer, they allow easy and cleanly separated JS-CSS communication (among other things !).

It’s really easy to use them in combination with styled-components, and opens some great possibilities, like controlling variables using react-motion :

You can see the result live here.