Css style

How to Style React Components Using CSS Modules

CSS modules provide a way to locally extend CSS class names. You don’t have to worry about overriding styles when using the same class name.

Learn how CSS modules work, why you should use them, and how to implement them in a React project.

What are CSS modules?

The Documentation of CSS modules describe a CSS module as a CSS file whose class names are defined locally by default. This means that you can address CSS variables with the same name in different CSS files.

You write CSS module classes like normal classes. Then the compiler generates unique class names before sending the CSS to the browser.

For example, consider the following .btn class in a file called styles.modules.css:

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

To use this file, you must import it into a JavaScript file.

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

Now, to reference the .btn class and make it available in an element, you would use the class as shown below:

class="styles.btn"

The build process will replace the CSS class with a unique name of the format like _styles__btn_118346908.

Class name uniqueness means that even if you use the same class name for different components, they will not collide. You can ensure greater code independence since you can store a component’s CSS styles in a single file, specific to that component.

This simplifies debugging, especially if you’re working with multiple style sheets. You will only have to search for the CSS module for a particular component.

CSS modules also allow you to combine multiple classes through the compound keyword. For example, consider the following .btn class above. You can “extend” this class into other classes using compose.

For a submit button, you might have:

.btn {
}

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

This combines 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 you must write the composition rule before the other rules.

How to use CSS modules in React

How you use CSS modules in React depends on how you build the React application.

If you use create-react-app, the CSS modules are configured immediately. However, if you are going to build the app from scratch, you will need to configure the CSS modules with a compiler like webpack.

To follow this tutorial, you should have:

Creating a Responsive Application

To simplify things, you can use create-react-app to scaffold a React application.

Run this command to create a new React project called react-css-modules:

npx create-react-app react-css-modules

This will generate a new file called react-css-modules with all the dependencies needed to get started with React.

Creating a button component

You will create a Button component and a CSS module called Button.module.css in this step. In the src folder, create a new folder called Components. Inside this folder, create another folder called Button. You will add the Button component and its styles to this folder.

Move towards src/Components/Button and create Button.js.

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

Next, 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 the Button component, import it as styles and reference it in the class name of the button element like this:

import styles from "./Button.module.css"

export default function Button() {
return (
<button className={styles.btn}>Submit</button>
)
}

This is a simple example that shows how to use a single class. You can share styles between different components or even combine classes. For this, you can use the compose keyword as mentioned earlier in this article.

Use Compilation

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 type value as a prop. This type will determine the class name applied to the button element. So if the button is a submit button, the class name will be “submit”. If it is “error”, the class name will be “error”, and so on.

To use 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 class and the secondary class use the btn class. By doing this you reduce the amount of code you have to write.


You can go even further with an external CSS module called colors.module.css, containing the colors used in the application. You can then use this module in other modules. For example, create the colors.module.css file at the root of the Components folder with the following code:

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

.primaryColor {
color:
}
.secondaryColor {
color:
}

Now in the Button/Button.module.css file, modify the primary and secondary classes to use the above classes like this:

.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. For example, you can create a simple CSS class for a button component and reuse CSS classes through composition.

To optimize your use of CSS modules, use Sass. Sass—Syntactically Awesome Style Sheets—is a CSS preprocessor that provides a ton of functionality. They include support for nesting, variables, and inheritance not available in CSS. With Sass, you can add more complex functionality to your application.