Complete Guide of React CSS modules.

In this article, you will learn React CSS modules. I personaly use CSS modules in my React Projects.

What is React CSS module?

React CSS module is a CSS file that is only scoped to the component that is using it. I personally use CSS modules for my React projects because it is an easy way to style React components.

Why CSS module?

let me show you an example.

In this picture, I created a component that will display the heading and I imported a CSS file containing some Styles for the heading. Everything is ok, right? But if you are using this heading class somewhere else, the style will also be implemented to the element that is using the heading class.

To fix the issue We Will use the CSS module. Make sure if you are creating a CSS module you have to name it like this.

After creating a CSS module import it to your component like this.

Styles is an object that is containing keys as classes and values as styles. I am importing classes as Styles but you can name it whatever you want. Now to use classes, you have to write className={Styles.heading} in your element.

Now As you can see Header Styles are only scoped to the header Component.

Thanks for reading this article. If you learn something from this article give a clap to this article and don’t forget to follow me.