Hi, in this article we are going to get a detailed overview of different styling techniques that can be used in React projects. Techniques which I am going to show you below are for Web Applications. All these techniques are best at their place but we also need to consider the project requirements and easiness before selecting any of these techniques in our projects. So, why we are wasting our time? Let's get started!

1. Normal CSS (Cascading Style Sheet)

I know you know that without CSS the web is incomplete but it's worth mentioning. We can use CSS just like we use it in normal HTML. We just need to import the CSS file in our JS/ JSX file to use it.

import "./App.css";

// Note the class attribute below
<div className="app-container">
  <p>Life is Great!</p>
</div>

While using CSS normally in React, we need to take some precautions. The same Class name and Id name can be used all over the application. This will become a problem if you accidentally define the CSS Class with the same name at different places or in different files. When you make changes in one CSS class of a particular component and it will get reflected at other places.

I know you don't want that.

Although, for simplicity, or if your application is small then you can use it but for bigger applications, it is not suggestible.

2. CSS Modules

This is a great way of using CSS in React applications. React supports CSS modules out of the box. It solves the problem of Normal CSS which we have discussed above.

"So, do I need to learn the CSS Module instead of CSS?"

No, no, no...! It's pretty simple.

1. You have to change the name of your normal CSS file and then put the "module" in the name.

e.g. if your file name is "App.css" then change it to "App.module.css".

Earlier, we were importing the CSS file like,

import "./App.css";

But now we have to import it like this,

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

Here, you could use any name instead of styles but do consider the naming convention. So, that anyone can read it easily.

2. Check the CSS file and remove any dash( - ) from the class name if any. Otherwise, it will not be going to work.

e.g. if a class name is ".app-container" then remove the dash( - ) and change it to "appContainer".

3. Now, it's time to get back into our JS / JSX file. You can't use the CSS class as you are using it before.

Earlier, if you are using it like,

<div className="app-container">
  <p>Life is Great!</p>
</div>

Then now, you have to use it like this,

<div className={styles.appContainer}>
  <p>Life is Great!</p>
</div>

Remember, we have already changed the CSS class name "app-container" to "appContainer" in CSS module file.

3. SCSS (Sassy CSS)

If you are familiar with SCSS and comfortable with it then this option is also available to you. You can use it in your project by installing its dependency in your project. It does not come right out of the box in React.

You can install Sass globally using npm install -g sass which will provide access to the sass executable. You can also add it to your project using npm install --save-dev sass. There is no need of importing it, just change the .css file extension to .scss and use it.

4. Styled Components

It's an another great way of styling components in React projects or applications. It’s CSS in JS & great thing about it is that you just need to write styles in the JS files only! Now, you can import the styles like React components. With the help of Tagged Template Literal, you could write styles for your components.

Remember it is CSS in JS, you can pass variables directly which is called props to the styled component and render styles conditionally which was not possible in the CSS, SCSC or CSS Module case. It makes things lot easier if you konw how to use it effectively.

You have to install dependency for using it in your project. In your terminal type npm install --save styled-components and import it.

Lets see an example to understand it.

import React from "react";
import styled from "styled-components";

const ButtonPrimary = styled.button`
  color: #ffffff;
  background-color: #000000;
  height: 5rem;
  width: 10rem;
`;

const ButtonSecondary = styled.button`
  background-color: #000000;
  height: 5rem;
  width: 10rem;
  color: ${(props) => props.textColor || "#ffffff"};
`;

const MyComponent = () => {
  return (
    <>
      <ButtonPrimary>Click</ButtonPrimary>
      <ButtonSecondary textColor="#F97A7A">Click</ButtonSecondary>
    </>
  );
};

export default MyComponent;

You could check more about Styled Components from their official Documentation.

Thanks for giving your precious time. Goodbye!

Learn more about ReactJs on Faguni.