Styling in React.js

Styling in React.js can be done in below two ways

• css style sheets
• inline style

Let’s see CSS style sheets first

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.

Solution for avoiding the CSS classes from getting global

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.

Let’s see the inline styling of react components

Inline styles are created using JavaScript objects (key value property).

Example

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.