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 to use Radium in React Application

Step 1: Initialize React Project

Create a React application using the following command:

npx create-react-app foldername

Step 2: Switch to Project Directory

After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: Install Radium

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

npm install --save radium

Project Structure:

The updated dependencies in the package.json file are:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "radium": "^0.26.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Step 4: Import Radium

import Radium from "radium";

Step 5: Define the styling

Example: This example demostrates using Radium for defining the inline hover styles in React.

// Filename - App.js

import React, { Component } from "react";
import Radium from "radium";

class App extends Component {
	render() {
		const style = {
			":hover": {
				backgroundColor: "green",
				color: "white"
			},
			padding: "10px",
			border: "1px solid black",
			cursor: "pointer"
		};

		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 6: Run the Application

Now run your app again using the command.

npm start

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