How to use Radium in React for inline styling?

Pseudo selectors and media queries are generally used for inline styling. So, in this article, we will see how to use Radium in React for inline styling.

How to use Radium in React for inline styling?

Radium is a popular npm package for React which allows users to use inline styling with pseudo selectors and media queries. Without this third-party package, users can not do inline styling with pseudo selectors. This is because React doesn’t allow users to use pseudo-selectors in inline styling. Examples of pseudo-selectors are hover, visited, link, etc.

Example:

So, 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 also see your sample react app running (http://localhost:3000/) using the command in your terminal from the root of my-app.

$ npm start

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

Step 5: So, now install Radium 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.

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

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

Conclusion:

So, in this article, we have been through how to use Radium in React for inline styling. Also, feel free to comment with your suggestions and feedback. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced React JS developers.