We have seen the usage of React JS Library and how to create reusable react components but for every web page UI styling is quite important to develop responsive web pages.  The blog provides the various available components which can be used for React UI Styling.

Usage of CSS File in React JS Applications  

The React UI Pages can be styled using the Cascading Style sheet (CSS). The react components could be added with the inline style and should be specified as an object

<h1 headingColor={{color:'blue',fontFamily:'Arial'}}>This text uses inline style</h1>

The css properties are defined using 2 pairs of curly braces where the first pair is as an object with the value to the style property and 2nd pair is to evaluate the JSX expression.

The css properties can be defined in the CSS file which needs to be imported as given below

Usage of Bootstrap Library in React JS Applications 

 Styling can be achieved using the bootstrap library for react based applications. We need to install the bootstrap library in the current react application.

npm install bootstrap

The bootstrap library is installed under the node_modules/bootstrap

You need to import the file in the App.js to include the stylesheet properties from bootstrap. The below given is the simple example of bootstrap stylesheet applied to button

import 'bootstrap/dist/css/bootstrap.min.css';
<button classname"btn btn-success"> Submit </button>

Usage of React-Bootstrap Library in React JS Applications 

React-Bootstrap provides the library for front-end components. React-Bootstrap can be installed using the below given command

npm install react-bootstrap bootstrap

You need to import the file in the App.js to include the stylesheet properties from React-Bootstrap. The below given is the simple example of bootstrap stylesheet applied to button

import Button from 'react-bootstrap/Button';
<Button variant="warning"> React-Bootstrap Styling </Button>

Usage of Material-UI in React JS Applications

Material-UI is one of the popular React UI Framework used for various front end components and themes for styling react based applications. Material-UI Framework can be installed using the below given command

npm install @material-ui/core

You need to import the file in the App.js to include the stylesheet properties from Material-UI.

import Button from '@material-ui/core/Button';