CSS Modules
Last updated: 2026-11-02
CSS Modules CSS Modules
CSS Modules turn an ordinary CSS file into locally scoped styles: at build time every class name is compiled into a unique identifier of the form fileName_className_hash, so components are naturally isolated and global style pollution disappears. In React you reference them through a styles.xxx object, which makes style isolation a zero-cost solution for medium and large projects. Nothing extra is required at runtime.
| Group | Ecosystem |
|---|---|
| Kind | Pattern |
| Since | Community standard — natively supported by Vite / CRA / Next.js |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
/* No install needed — Vite / Create React App support it out of the box */
/* Button.module.css — the file name must end with .module.css */
.title { color: #0969da; }
.active { color: #1a7f37; }
// Button.jsx — class names are referenced through the styles object
import styles from './Button.module.css'
export default function Button() {
return <button className={styles.title}>Button</button>
}
// styles.title compiles to 'Button_title_x7s2k2', globally unique and conflict-freeReturns：No return value — CSS Modules is a build-time solution; see the syntax and the example for how to use it.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Simulation: the demo first shows the compiled hash class names of styles.card and styles.title, then renders a card below. Clicking the Activate title button appends the active hash class name to the title and turns it blue. In a real project these hash class names get their styles from a .module.css file.💡 Key Points
🏷️ More Ecosystem
💡 Related Cases
📚 Related Tutorials
❓ FAQ
