How to use CSS modules to style React components

CSS modules provide a way to locally scope CSS class names. If you use the same class name, you don’t have to worry about overriding styles.

Find out how CSS modules work, why you should use them, and how to implement them in your React projects.

What is a CSS module

The CSS module documentation describes CSS modules as CSS files whose class names are locally scoped by default. This means that you can specify CSS variables with the same name in different CSS files.

Write a CSS module class like you would a regular class. The compiler then generates a unique class name before sending the CSS to the browser.

For example, let’s say you have the following .btn class in a file called styles.modules.css.

 .btn {
    width: 90px;
    height: 40px;
    padding: 10px 20px;
}
 

To use this file, you need to import it in your JavaScript file.

 import styles from "./styles.module.js"
 

Now, to reference the .btn class so that it can be used in an element, use the class as shown below.

 class="styles.btn"
 

The build process replaces CSS classes with unique names of the form: _styles__btn_118346908.

Class name uniqueness means that you can use the same class name for different components and they will not clash. A component’s CSS styles can be stored in her one file specific to that component, allowing for greater code independence.

This simplifies debugging, especially when using multiple stylesheets. All you need to do is track the CSS module for a particular component.

You can also use CSS modules to combine multiple classes. Configure keyword. For example, consider the following .btn class above. You can use Compose to “extend” that class to other classes.

For the submit button you can do something like this:

 .btn {
    
}
 
.submit {
    composes: btn;
    background-color: green;
    color:
}
 

This is a combination of the .btn and .submit classes. You can also compose styles from another CSS module, like this:

 .submit {
    composes:primary from "./colors.css"
    background-color: green;
}
 

Note that configuration rules must be written before other rules.

How to use CSS modules in React

How you use CSS modules with React depends on how you build your React application.

Using create-react-app will set up the CSS module in no time. However, if you’re building your application from scratch, you’ll need to configure CSS modules with a compiler such as webpack.

To follow along with this tutorial, you need:

Create a React application

To keep things simple, you can use create-react-app Scaffold your React app.

Create a new React project named react-css-modules by running the following command:

 npx create-react-app react-css-modules
 

This will generate a new file named react-css-modules that contains all the dependencies you need to get started with React.

Create a button component

In this step you will create a Button component and a CSS module called Button.module.css. In the src folder create a new folder named Components. In that folder, create another folder called Button. Add a Button component and its style to this folder.

invite src/component/button Create Button.js.

 export default function Button() {
    return (
        <button>Submit</button>
    )
}
 

Then create a new file called Button.module.css and add the following:

 .btn {
    width: 90px;
    height: 40px;
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
}
 

To use this class in a Button component, import it as a style and reference it by the button element’s class name, like this:

 import styles from "./Button.module.css"
 
export default function Button() {
    return (
        <button className={styles.btn}>Submit</button>
    )
}
 

Here is a simple example showing how to use a single class. You can even share styles and combine classes between different components. For this, you can use the composes keyword, as mentioned earlier in this article.

Using composition

First, modify the Button component with the following code.

 import styles from "./Button.module.css"
 
export default function Button({type="primary", label="Button"}) {
    return (
        <button className={styles[type]}>{label}</button>
    )
}
 

This code makes the Button component more dynamic by accepting a value of type as a prop. This type determines the class name applied to the button element. So if your button is a submit button, the class name will be “submit”. For “Error”, the class name will be “Error” and so on.

To take advantage of the compose keyword instead of writing all the styles for each button from scratch, add the following to Button.module.css:

 .btn {
    width: 90px;
    height: 40px;
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
}
 
.primary {
    composes: btn;
    color: 
    background-color: 
}
 
.secondary {
    composes: btn;
    color: 
    background-color: 
}
 

In this example, the primary and secondary classes use the btn class. This can reduce the amount of code you need to write.

You can take this further with an external CSS module called color.module.cssContains the colors used by the application. You can then use this module in other modules. For example, create a colors.module.css file with the following code in the root of the Components folder.

 .primaryBg {
    background-color: 
}
.secondaryBg {
    background-color: 
}
 
.primaryColor {
    color: 
}
.secondaryColor {
    color: 
}
 

In the Button/Button.module.css file, modify the primary and secondary classes to use the above classes as follows:

 .primary {
    composes: btn;
    composes: primaryColor from "../colors.module.css";
    composes: primaryBg from "../colors.module.css";
}
 
.secondary {
    composes: btn;
    composes: secondaryColor from "../colors.module.css";
    composes: secondaryBg from "../colors.module.css";
}
 

Sass with CSS modules

You can use CSS modules to improve the modularity of your codebase. As an example, you can create a simple CSS class for your button component and reuse the CSS class throughout your composition.

Use Sass to power the use of CSS modules. Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that offers tons of features. It includes support for nesting, variables, and inheritance not available in CSS. Sass allows you to add more complex functionality to your application.