Use Radium in ReactJS

In this article, we are going to see how to apply inline styling to a component in a React application.

Radium is a popular third package application used to add inline styling and pseudo selectors such as :hover, :focus, :active, etc. to a JSX element.

Installing the module

npm install --save radium

OR

yarn add radium

Npm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.

Example

App.jsx

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

function App() {
   const style = {
      ':hover': {
         backgroundColor: '#000',
         color: '#fff',
      },
   };
   return (
      <div>
      <h3>TutorialsPoint</h3>
      <button style={style}>Hover Me</button>
      </div>
   );
}
export default Radium(App);

We can also add other pseudo selectors and custom CSS styling to our component.

Output

This will produce the following result.