In React, there are several ways to apply CSS styling to the React Components. Generally we can add css styles to the React components by using CSS classes through className attributes.

As you know React JSX supports JavaScript Expressions, so there are many methods to add CSS to React components.

We will learn here the three most common ways of CSS styling in React:

1. Inline styling
2. CSS stylesheets
3. CSS Modules

Inline CSS

Normally, we can add Inline CSS by using style attributes to the JSX elements. But as you learned in the JSX chapter, JavaScript expressions are written inside curly braces in JSX, and since JavaScript objects also use curly braces, so when you use inline CSS styles in JSX, you have to use double curly braces (`{{}}`). For example:

Inline CSS styles in regular HTML:

<h1 style="color: red; background-color: blue;"}>Hello Style!</h1>

Inline CSS styles in JSX.

import React from 'react'

function User() { 

return (
<h1 style={{color: "red", backgroundColor: "blue"}}>Hello Style!</h1>
)
}

export default User;

As you can see in the above example, how I have used Inline CSS styles in JSX. There are two more things to be noted and keep in mind:

1 – When you add more than one CSS style, then you have to use comma ( , ) to separate each.
2 – You have to use camelCase naming convention with CSS properties, when you use CSS properties with hyphen separators like `background-color` in Inline CSS, it must be written in camelCase. For example: backgroundColor`, fontSize, etc.

Inline CSS using JavaScript Objects

You can use Inline CSS by passing a JavaScript Object. For that, you have to first create an object with CSS styling information, then use that object in the style attribute of the JSX element.

See the example below, I have created an object named `mystyles` with the CSS properties, then I used it in the style attribute of H1

import React from 'react'

const myStyles = { color: "red",
backgroundColor: "blue", fontSize: "150px"
};

function User() { return (
<h1 style={myStyles}>Hello Style!</h1>
)
}

export default User;

 

CSS Stylesheets

Writing CSS in a stylesheet is probably the most common and basic approach to styling a React application. It’s very easy to use and understand.

The CSS stylesheet method has many features like, CSS variables to store dynamic values, advanced selectors to select child elements with precision, and pseudo-classes like `::after`, `::before`, `:hover`,etc.

You can use regular CSS stylesheets to style your components in React. Using CSS stylesheets in React is similar to using CSS stylesheets in traditional web development, but there are few differences between them.

Let’s talk about How to use CSS stylesheets in React?

1 – First create a CSS file inside the `src` folder, and give its name whatever is your choice but when you create a CSS file for a specific component, then i recommend to give its name the same as that component name. For example: if I have a component named User.js then I will create a CSS file for it named `User.css`.

2 – Then import that CSS file into the Components. For example:

import React from 'react' 
import "../User.css"

function User() { 
return (
<h1 className='Heading'>Hello Style!</h1>
)
}

export default User;

After importing the CSS file into the component, you can write the CSS to style that component. Okay!

CSS Modules

Styling your React application using CSS Modules is a very popular approach. It allows you to write modular, reusable, and scoped CSS styles for your components. CSS modules make it easier to manage styles within components.

This method is the same CSS stylesheets method but there are some fundamental differences between them. Let’s understand with examples:

First, in this method when we create a CSS file we have to follow its naming convention. Instead of `.css`, we have to use `.module.css` as the file extension. So, we have created a CSS file named `User.css` for the `User` component, we will change this name to
`User.module.css`.

Then import that CSS module file with a JavaScript expression named `styles` into the
`User` Components. Like:

import styles from "../User.module.css"

Then to apply style to your JSX element, you need to use mapped class names from the
`styles` object. Like `styles.heading`, here styles is the object & heading is the class name. Code example below:

import React from 'react'
import styles from "../User.module.css"

function User() { return (
<h1 className={styles.heading}>Hello Style!</h1>
)
}

export default User;

Then you can write CSS in your `User.module.css` file.

Pro Tips: When you are using CSS modules, if you want to add multiple class names in JSX elements, then you can do it by combining them using template literals (` `). Example below:

<h1 className={`${styles.heading} ${styles.mainHeading}`}>Hello Style!</h1>

Template Literals feature introduced in ECMAScript 6 (ES6). We have already learned about it in ES6 chapter.