Styling in React.js

Styling in React.js can be done in below two ways
css style sheets
inline style
We have App.js file as shown below −
import React, {Component} from 'react';
import './App.css';
class App extends Component {
   render(){
      return (
         <div className="App">
            <p className="myColoredText">Styling React Components</p>
            </div>
      );
   }
}
export default App;
In App.js file we have imported an App.css file which contains css class myColoredText
Please note
We used name of css class in double quotes with attribute className
JSX uses camelCase notations for writing attributes on html element.
We have App.css as below −
.myColoredText{
   color:blue;
   background:yellow;
   margin:auto;
   width:20%;
   padding:20px;
}
Issue with writing css classes with above approach is that the css classes becomes global once webpack build final css file.
Then css classes can get overridden by other css files having same css class.
Use of css module prevents this from happening. The css file names should end with module.css extension.
This solution creates unique css classes in workflow which prevents them from overriding
The css classes will become fileName_cssClassName__hashValue
With this logic, the above used App.css file should be renamed to App.module.css
We can use both the global and module.css files in our application.
For common css we can create a global css file without using module.css extension.
Inline styles are created using JavaScript objects (key value property).
import React, {Component} from 'react';
import './App.css';
class App extends Component {
   render(){
      let myInlineStyle={
         boxShadow:'0 2px 3px #ccc',
         border:'2px solid blue',
         marginTop:'50px'
      }
      return (
         <div className="App">
            <p className="myColoredText" style={myInlineStyle}>Styling React Components</p>
         </div>
      );
   }
}
export default App;
There is a problem with inline styling as well. For hovering the elements using mouse requires third party libraries like radium.
We can install radium as below −
on the application directory, run the following command
npm install --save radium
Add radium in jsx file.
add import for radium
import Radium from 'radium';
Once installed, add hovering object in inline styling object as below −
let myInlineStyle={
   boxShadow:'0 2px 3px #ccc',
   border:'2px solid blue',
   marginTop:'50px',
   ':hover':{
      background:'white'
   }
}
With radium, App.js file looks like below −
import React, {Component} from 'react';
import './App.css';
import Radium from 'radium';
class App extends Component {
   render(){
      let myInlineStyle={
         boxShadow:'0 2px 3px #ccc',
         border:'2px solid blue',
         marginTop:'50px',
         ':hover':{
            background:'white'
         }
      }
      return (
         <div className="App">
            <p className="myColoredText" style={myInlineStyle}>Styling React Components</p>
         </div>
      );
   }
}
export default Radium(App);
The important thing is we have to wrap or export component in Radium like below −
export default Radium(App);
Now, on hovering it shows the background as white. This way we can handle the inline styling. It’s basically a JavaScript object.