Radium

One of the first libraries created to solve the problems of inline styles we have encountered in the previous section is Radium. It is maintained by the great developers at Formidable Labs, and it is still one of the most popular solutions.

In this section, we will look at how Radium works, which problems it solves, and why it is a great library to use in conjunction with React for styling components.

We are going to create a very simple button, similar to the one we built in the example earlier in this chapter.

We will start with a basic button without styling, and we will add some basic styling, as well as pseudo classes and Media queries, to it in order to learn the main features of the library.

The button we will start with is as follows:

const Button = () => <button>Click me!</button> 

First, we have to install Radium using npm:

npm install --save radium

Once the installation is complete, we can import the library and wrap the button into it:

import radium from...