How to use styles in ReactJS ?

React is a popular JavaScript library for building single-page applications (SPAs) with dynamic user interfaces. Styling in React can be done in various ways, each with its advantages. In this article, we will explore different approaches to applying styles in React, including inline styles, CSS files, CSS modules, and styled components.

Prerequisites

Before you start, make sure you have:

• A basic understanding of CSS.
• ReactJS set up in your development environment.

Steps to Create a React Application

Before learning into the different styling approaches, let's start by creating a React application.

Run the following command to create a new React app:

npx create-react-app  app-name                                                                                 

Replace my-app with your desired project name.

1. Using Inline Styles

Inline styles in React are defined using the style prop, which accepts an object. The keys in the object are written in camelCase, and the values are the corresponding CSS values.

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. 

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.

2. Using CSS File

To style elements using a traditional CSS file, you can create a CSS file and import it into your React component.

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.

/*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;
}

// App.js

import './App.css';

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

export default App;

3. Using CSS Modules

CSS Modules allow you to locally scope CSS by generating unique class names. To use CSS Modules, create a file with the .module.css extension and import it into your component.

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.

/*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;
}

// 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;

4. Using Styled-Components

styled-components is a popular library for writing component-level styles in JavaScript. It allows you to create styled components with a combination of CSS and JavaScript.

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.

// 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;