How to Use CSS Modules in React for Scoped Styling

In React, use CSS Modules by importing a CSS file with the .module.css extension and applying styles as object properties. This keeps styles scoped locally to components, avoiding conflicts and making styling easier to manage.

Syntax

To use CSS Modules in React, create a CSS file with the .module.css extension. Import it into your React component as an object. Use the object's properties as class names in your JSX.

• Filename: Must end with .module.css (e.g., Button.module.css).
• Import: import styles from './Button.module.css';.
• Usage: Apply classes with className={styles.className}.

jsx

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Output

A button styled with the CSS class 'primary' scoped to this component only.

Example

This example shows a React component using a CSS Module to style a button with a blue background and white text. The styles are scoped only to this component, so they won't affect other parts of the app.

jsx

// Button.module.css
.primary {
  background-color: #007bff;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

// Button.jsx
import React from 'react';
import styles from './Button.module.css';

export default function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Output

A blue button with white text labeled 'Click me' displayed on the page.

Common Pitfalls

Common mistakes when using CSS Modules in React include:

• Not naming the CSS file with .module.css extension, so styles are not scoped.
• Using plain className="className" instead of className={styles.className}, which breaks the scoping.
• Trying to use global CSS class names without :global syntax inside CSS Modules.
• Forgetting to import the CSS Module file in the component.

jsx

// Wrong usage example
import './Button.css'; // Missing .module.css

function Button() {
  return <button className="primary">Click me</button>; // No scoping
}

// Correct usage example
import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Quick Reference

Here is a quick summary to remember when using CSS Modules in React:

Step	Description
1. Create CSS file	Name it with .module.css extension.
2. Import styles	Use import styles from './file.module.css';.
3. Use styles	Apply with className={styles.className}.
4. Avoid global classes	Use :global if needed inside CSS.
5. Scoped styling	Styles apply only to the importing component.

Key Takeaways

Always name your CSS files with the .module.css extension to enable CSS Modules.

Import the CSS Module as an object and use its properties as class names in JSX.

CSS Modules scope styles locally, preventing conflicts across components.

Avoid using plain class names strings; always use the imported styles object.

Use :global inside CSS Modules only when you want to apply global styles.