Skip to content

Courses
Tutorials
Practice
Contests

React Tutorial
React Exercise
React Basic Concepts
React Components
React Props
React Hooks
React Router
React Advanced
React Examples
React Interview Questions
React Projects
Next.js Tutorial
React Bootstrap
React Material UI
React Ant Design
React Desktop
React Rebass
React Blueprint
JavaScript
Web Technology

How to use innerHtml in React JS ?

How to use Radium in React app for inline styling?

Last Updated : 07 Oct, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

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.

JavaScript

// 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.

How to use innerHtml in React JS ?

raman111

Improve

Article Tags :

Technical Scripter
Web Technologies
Node.js
ReactJS

Similar Reads

How to use Inline Styles in React ?

ReactJS is a JavaScript library that is used to build a user interface. React makes it easy to create an interactive user interface by using a component-based approach. It offers various ways to apply styles to components. One of the methods is using inline styles, where styles are defined directly

How To Use Inline Styles in ReactJS?

Inline styles in React allow you to directly apply CSS styles to elements using the style attribute. This is often used for dynamic styling, where styles need to be applied based on the component's state or props. Inline styles in React are written as JavaScript objects. Each CSS property is camelCa

Tips for styling React apps in JavaScript

Although many developers continue to employ CSS for styling their React applications, there is a growing trend in using JavaScript to write styles. This approach has gained popularity as it provides the conveniences of CSS preprocessors without requiring mastery of a new language. Within CSS-in-JS l

How to Create List Styling in ReactJS ?

React, a declarative, efficient, and flexible JavaScript library for building user interfaces, plays a crucial role as the 'V' in MVC. Specifically, ReactJS, an open-source, component-based front-end library maintained by Facebook, focuses on the view layer of applications. In this article, we will

How to use innerHtml in React JS ?

React.js provides a easy way of handling UI updates. However, sometimes you need to inject HTML directly into your components. PrerequisitesIntroduction to ReactReact ComponentsReact HooksNPM or NPXIn this article, we are going to learn how can we use InnerHTML in React JS. We can add HTML into Reac

How to style a href links in React using Tailwind CSS ?

In this article, we will learn how we can style a href link in Reactjs. Since we use Tailwind CSS, Tailwind CSS describes itself as the first applicable CSS framework. Rather than focusing on the performance of a style object, Tailwind focuses on how it should be displayed. This makes it easier for

How to use styles in ReactJS ?

React is a popular JavaScript library for building single-page applications (SPAs) with dynamic user interfaces. Styling in React can be done in various ways, each with its advantages. In this article, we will explore different approaches to applying styles in React, including inline styles, CSS fil

How to use Tailwind Forms Plugin with React Select ?

Tailwind CSS, a utility-first styling library for web design, offers Tailwind forms as plugins that provide a foundational reset for form styles. This simplifies the styling process for form elements, allowing easy customization with utilities. React Select, a select component library, is employed f

How to use NoSsr Component in ReactJS?

NoSsr purposely removes components from the subject of Server Side Rendering (SSR). Material UI for React has this component available for us, and it is very easy to integrate. We can use the NoSsr Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSMaterial UISteps

How to use Bootstrap Icons in React ?

ReactÂ is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. Itâ€™s great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences