CSS Modules

[unnatik]

Hey everyone! I had to manually configure CSS Modules in my project even after using create-react-app. Is it always that we have to manually configure or did I do something wrong when I created my project.

[PavanKu]

Hi @unnatik, CSS module is turned on for files ending with .module.css.
It is also documented in CRA docs

[unnatik]

@PavanKu thank you.

[DarnerDiaz]

CSS Modules in Create React App - Complete Guide

CSS Modules are built-in and zero-config in CRA! No extra setup needed.

Basic Setup

Just rename file to .module.css:

/* Button.module.css */
.primary {
  background: blue;
  padding: 10px 20px;
  border: none;
  color: white;
  border-radius: 4px;
}

.secondary {
  background: gray;
  color: black;
}

/* Button.jsx */
import styles from "./Button.module.css";

export function Button({ variant = "primary" }) {
  const className = styles[variant];
  return <button className={className}>Click me</button>;
}

Key Benefits

1. Scoped CSS - Classes are automatically unique (.Button__primary--abc123)
2. No naming conflicts - Each module is isolated
3. Type-safe imports - IDE autocomplete works
4. No build setup - CRA handles everything

Advanced Patterns

Combining multiple classes:

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

const buttonClass = [styles.base, styles.primary, isActive && styles.active]
  .filter(Boolean)
  .join(" ");

return <button className={buttonClass}>Text</button>;

Or using classnames library (optional):

npm install classnames

import cn from "classnames";
import styles from "./Button.module.css";

return (
  <button className={cn(styles.base, styles.primary, { [styles.active]: isActive })}>
    Text
  </button>
);

CSS Modules + SCSS

If using SCSS (with node-sass installed):

/* Button.module.scss */
.primary {
  background: blue;
  padding: 10px 20px;
  
  &:hover {
    opacity: 0.9;
  }
}

When NOT to use CSS Modules

• Global styles (like resets, typography base) → Keep in index.css
• Single-page layouts → Can use regular CSS
• Heavily vendor-dependent styles → CSS-in-JS may be better

Migration from Regular CSS

// Before (global CSS)
import "./Button.css";
<button className="primary">Click</button>

// After (CSS Modules)
import styles from "./Button.module.css";
<button className={styles.primary}>Click</button>

That's it! CSS Modules give you component-scoped styling out of the box. Highly recommended for scalable CRA projects.

See: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

[gauravkushwah8518-rgb]

This is a great update! Moving from styled-components to CSS Modules should help make the styling layer more lightweight while keeping component styles isolated.

For example, instead of defining styles through JavaScript with styled-components:

const Button = styled.button`
  background: blue;
  color: white;
  padding: 8px 16px;
`;

CSS Modules can keep the styles in a separate CSS file:

/* Button.module.css */
.button {
  background: blue;
  color: white;
  padding: 8px 16px;
}

And then use them in the React component:

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

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

This gives the component locally scoped class names and avoids relying on the same runtime styling approach. I’m particularly interested in seeing the real-world improvements in JavaScript bundle size and both client-side and server-side rendering performance with Primer React v38.

[SanketPathare]

CSS Modules allow you to write CSS with locally scoped class names, helping prevent style conflicts between components.

For example, in a React project:

1. Create Button.module.css:

.button {
  background-color: #2563eb;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

2. Import and use the CSS Module:

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

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

The build tool generates scoped class names, so the .button styles won't unintentionally affect other components.

CSS Modules are supported by default in frameworks such as Next.js and can also be configured in build tools like Vite.

If you're experiencing a specific issue with CSS Modules, please share your framework, configuration, and the error you're seeing so the problem can be diagnosed more precisely.