So how do React inline styles look like?
We could now use these styles in our component as follows:
It creates a button style based on the color you give it. That color will be the background color. If it’s a light color the text will be black, otherwise the text will be white. It’s a bit like a SASS mixin, except for that you have even more possibilities.
Now we want to use hover styles on our button. This is a tough one, because we use inline styles instead of CSS, we can’t use
:hover. This is where Radium comes in. It’s a decorator for React classes, which allows you to use a
We can now just use hover styles in our style object and Radium handles the rest.
As you can see, lot’s of possibilities. I’m eager to hear about anyone that applied this in their projects and what their experiences are. Happy styling!