Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to 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.
Updated on: 18-Mar-2021
628 Views
Advertisements