How to use Radium in React app for inline styling?

Radium is a popular npm package for React which allows us to use inline styling with pseudo selectors and media queries. Without this third party package, one can not do inline styling with pseudo selectors because React doesn’t allow us to use pseudo-selectors in inline styling. 

Examples of pseudo-selectors: hover, visited, link, etc.

Steps for adding and using RADIUM in the react app: Here is an example of styling a button having a hover(pseudo selector) effect.

Step 1: Make a new folder for the project.

Step 2: Now in your terminal, run the following command from the root of your project folder for installing create-react-app and saving it globally.

$ npm install create-react-app -g

Step 3: Now create a sample react app using the command in your terminal. Name it my-app..

$ create-react-app my-app

Step 4:you can see your sample react app running(http://localhost:3000/) using the command in your terminal from the root of my-app.

$ npm start

Step 4: Now go to the app.js file in your editor and edit it, so that it returns a simple button.

Step 5: Now install REDIUM from the root of your my-app using the command.

$ npm install --save radium

Step 6: import RADIUM in your app.js file before using it.

Step 7: Edit the App,js.

Javascript

import Radium from 'radium';
import React from 'react';

function App() {
  const style={
    ':hover':{
      backgroundColor: 'green'
    }
  }
  return (
    <div>
      <h3>Now you can see hover is working in inline styling</h3>
    <button style={style}>example of radium</button>
    </div>
  );
}

export default Radium(App);

Step 8: Format is the same for other pseudo selectors also.

Step 9: Now run your app again using the command.

$ npm start

Output: Now, You can see our button has a hover effect added.