CSS Modules

Learn to create local class names with CSS Modules.

CSS Modules

CSS Modules scope styles to a component. The file is named Button.module.css; on import you get an object: import styles from "./Button.module.css".

You apply a class with className={styles.btn}. The bundler generates a unique name for each class, so there is no clash.

This method is the standard way to write safe styles in big projects.

Scoped class names

Modules turns a simple name like .btn into a unique name like Button_btn__x7y2. You do not write this name; the bundler generates it.

So even if two components both have .btn, they do not clash. This is the basis of scalable styling.

You can use camelCase class names: styles.primaryBtn.

Exercise Modules button

Complete the skeleton. Write a PrimaryButton component; import the styles object from "./PrimaryButton.module.css". Return <button className={styles.primary}>Send</button>. Export it.

Show example solution

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

function PrimaryButton() {
  return <button className={styles.primary}>Send</button>;
}

export default PrimaryButton;

Test yourself

How does a CSS Modules file name end?
```
The bundler scopes based on the suffix.
```
- .css
- .style
- .scss
- .module.css
Show answer

.module.css — The .module.css suffix marks it as a module.
CSS Modules: fill in the missing part
```
className={____}
```
Show answer
```
className={styles.btn}
```
CSS Modules: match the terms

.module.css

Modules suffix
styles.btn

Class usage
unique name

No clash
camelCase

Naming

Next lesson: Inline styles

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies