How to use styles in ReactJS ?

React is a Javascript front-end library that is used to build single-page applications (SPA). React apps can easily be styled by assigning the styles to the className prop. 

There are various ways to style a react app. In this article, we are going to discuss the following four ways to style a react app. 

1. Using Inline styles
2. Using CSS file
3. Using CSS module
4. Using styled-components

Project Setup – We can create the React app by using the command mentioned below on the command line.

npx create-react-app name_of_the_app

Note: To follow along with the example please delete all the content of App.js and App.css files.

Styling using Inline Styles – In order to apply the inline styles to the elements, we use the style prop. We pass an object with key as CSS properties in camelCase and value as the values that can be assigned to these CSS properties.

Syntax: The syntax to assign inline styles to CSS elements is mentioned below.

<div style={{backgroundColor: 'red'}}></div>

Filename: App.js The content of the App.js file is mentioned in the code given below in which we have added inline styling to the React elements. 

Step to run the application: Use the following command to start the application.

npm start

Output: Open the browser and go to http://localhost:3000, you will see the following output.

Note: For all below-given examples, the output will remain as above only. Though you can verify it at your end by pasting the content of App.js and App.css files and running the React app on your device.

Styling using CSS file – To style the React elements using the CSS file, we first import the CSS file and then assign the classes contained in the CSS file to the className prop of React elements. 

Syntax: The syntax to assign the classes to the className prop is mentioned below. 

<div className="name_of_the_class"></div>

Filename: App.js The content of App.js and App.css files demonstrating the use of CSS files to style React elements is mentioned below.

App.css

Styling using CSS module – CSS modules are a way to locally scope the content of your CSS file. We can create a CSS module file by naming our CSS file as App.modules.css and then it can be imported inside App.js file using the special syntax mentioned below.

Syntax:

import styles from './App.module.css';

Now we can easily assign the classes to the className properties mentioned below.

<div className={styles['container-div']}> 
    <h1 className={styles.heading}>GeeksForGeeks</h1>
</div>

The square bracket is used to access the class when it contains a hyphen or we can use it generally also. The dot can be used to access the class when it does not contain a hyphen. 

Filename: App.js The content of App.js and App.css files demonstrating the use of CSS modules to style the React element is mentioned below.

App.modules.css

Styling using styled-components – The styled-components is a third-party package that helps us create a new Styled component based on the React element and CSS styles provided to it. 

Module Installation: In order to use the styled-components you must first install it as a dependency using the following command from the command line.

npm install styled-components

Syntax: To create a styled component you can use the syntax mentioned below.

import styled from 'styled-components';
const GeeksHeading = styled.h1`
  color: white;
`;

The code above will create a new component based on the h1 element and style it with the CSS properties passed to it. The content of the App.js file demonstrating the use of styled-components is mentioned below.