How to use Style Module in React JS

This blog going to be the shortest one, because this is an easy topic but very important.

So I decided to write a blog on this.

Basically when we create a react app and add CSS, it works perfectly on a local machine but on the server or after uploading the build on the server all the CSS gets compiled, and if there are the same CSS classes throughout the project then the design may be disturbed.

Because there may be different designs inside each component but by mistake, the class name of elements is the same.

So to avoid this issue we use Style Modules.

What Style Module Do ?

So style module makes sure that each element in each component get styled with a unique class and no design overlap occurs due to the same class name inside components.

Below you will see the code without the style module.

App.js File

import style from './App.css';

function App() {
  return (
    <div class="paddingClass">
      <div class="red">This is a Red color div</div>
      <button class="button" type="button">Change my color to blue</button>

export default App;

App.css File


So these two files App.js and App.css are using the basic techniques to add a style class to an HTML element. But as I told you during build these classes get overridden with other classes with the same name.

To avoid this problem we use the Style Module, First of all, we need to rename our App.css class to App.module.css, and then we just need to modify the App.js file rest code in the App.css file will remain the same in the App.module.css file.

Now App.module.css file will remain the same as App.css like the above code, But the App.js file code will change to the below code.

import style from './App.module.css';

function App() {
  return (
    <div class={style.paddingClass}>
      <div class={}>This is a Red color div</div>
      <button class={style.button} type="button">Change my color to blue</button>

export default App;

In the above code, we are importing the App.module.css file with a reference variable name style, you can name it whatever you want, but should be valid according to javascript variables.

With this style variable, you can access all classes of the App.module.css file.

This Style Module generates unique classes for each component, Let’s see the output of the above code.

As you can see the Style Module generated classes are unique and will not overlap with other classes after project build.

That’s it for this blog if you like it please comment and share with your friends. 🙂

Related Posts

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

react js icon

What is Redux? What is action, reducer and store in Redux

In this blog we will discus about the redux, what is Redux and how you can use it in React application. What is Redux? Redux is a…

react js icon

What is useEffect Hook? How to Fetch data from API using useEffect

useEffect hook is used to manage side effects that are not related to component rendering. Mostly useEffect hook is used for managing console logs, animations, loading data,…

react js icon

What is useReducer Hook? What is the difference between useState and useReducer Hooks?

useReudcer hook takes the current state and returns a new state, it is used for state management. With useReducer, we can directly call the function inside the…

react js icon

Creating React JS App without using npx create-react-app command

It’s easy to create a react application by just running npx create-react-app project_name command, do you know what are the basic requirements for creating a react application…

react js icon

What is the useState() hooks in React JS | How to use useState() hook in React JS

Hooks are very important in react js and the most common hook is the useState Hook. In this blog, we will look into the functionality of this…

Leave a Reply

Your email address will not be published. Required fields are marked *