What are the different ways to add CSS in React JS?

Overview

In this shot, we will be going over the best ways to add CSS code in React JS or to a React app. CSS is crucial in making your app user-friendly and visually attractive. Below are the different ways to add CSS to a React app.

External stylesheet

You can create a new CSS file in your project directory and add your CSS inside it. You can then import the file in your component, class, or React JS page.

You can use the code below to import an external CSS stylesheet:

import "./styles.css";

Inline CSS

Inline CSS is probably the most common and quickest out of the three methods to add CSS to a React app. However, it has many disadvantages and is generally discouraged to use unless you have a very small application.

We create an object that contains different references, which we then call with the style{} attribute.

For example, the CSS is added as shown below:

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

The CSS is then added to an element like so:

<section>
  <div>
  </div>
</section>

Styled components

Styled components let you write actual CSS in your JavaScript. The main advantage is that you can add conditional code and use variables and functions within the CSS.

You can install styled-components with the following command:

npm install --save styled-components

Next, you need to import styled-components in your component. You can then create a new variable that will contain the CSS. The same variable name with open and close brackets will render or create an HTML element with the previously added styles.

import styled from 'styled-components'
// Create a button variable and add CSS
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid red;
  color:red;
`
//display the HTML
render(
  <div>
    <Button>Button</Button>
  </div>
);

CSS modules

You can also add scoped styles easily, as you just need to create a file with the extension .module.css, as shown below:

// ComponentName.module.css

.Red {
  color: #f00;
}

.Blue {
  color: #00f;
}

Then, you import the styles as follows:

import styles from "./ComponentName.module.css";

You can now use the styles as shown below:

<span className={styles.Red}>This text will be red</span>
<span className={styles.Blue}>This text will be blue</span>

Atomic CSS

One of the most popular atomic CSS frameworks out there is Tailwind. If you include Tailwind in your project by following the official instructions, you can use classNames without even touching CSS.

<button className="font-bold bg-blue-600 px-6 py-3 text-white rounded-md">Blue button</button>

Emotion

Styled components are not the only library that allows you to create components with embedded styles. One alternative is Emotion. The best thing about Emotion is that its framework is agnostic, so you can take your knowledge to other libraries and frameworks besides React, while being pretty similar to styled-components, so you can change the import in several scenarios).

---

In this shot, we went over the options that will tick most of the boxes needed when adding CSS to your app.