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.