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. 

Prerequisites

• CSS fundamentals
• Knowledge of React JS

Steps to create React Application

Step 1: Create a React application using the following command:

npx create-react-app  app-name                                                                                                      

Approach 1: 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>

Example: 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. 

Javascript

const App = () => {
    return (
        <div
            style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "100vh",
                backgroundImage:
                    "linear-gradient(to right, #427ceb, #1dad6f)",
            }}
        >
            <h1 style={{ color: "white" }}>GeeksForGeeks</h1>
        </div>
    );
};

export default App;

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.

Approach 2 : 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>

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

Javascript

// App.js

import './App.css';

const App = () => {
    return (
        <div className='container-div'>
            <h1 className='heading'>GeeksForGeeks</h1>
        </div>
    );
};

export default App;

CSS

/*App.css*/

.container-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(to right, #427ceb, #1dad6f);
}

.heading {
    color: white;
}

Approach 3: 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. 

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

Javascript

// App.js

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

const App = () => {
    return (
        <div className={styles['container-div']}>
            <h1 className={styles.heading}>GeeksForGeeks</h1>
        </div>
    );
};

export default App;

CSS

/*App.modules.css*/

.container-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(
          to right, #427ceb, #1dad6f);
}

.heading {
    color: white;
}

Approach 4: 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.

Javascript

// App.js

import styled from 'styled-components';

const PageDiv = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: linear-gradient(
      to right, #427ceb, #1dad6f);
`;

const GeeksHeading = styled.h1`
  color: white;
`;

const App = () => {
    return (
        <PageDiv>
            <GeeksHeading>GeeksForGeeks</GeeksHeading>
        </PageDiv>
    );
};

export default App;