React CSS Modules

🎨 React CSS Modules (Full Guide with Examples)

CSS Modules allow you to write regular CSS, but the styles are scoped locally to the component — meaning there will be no class name conflicts.

React automatically converts class names into unique hashed names.

✅ Why Use CSS Modules?

📁 Folder Structure Example

🧩 Step 1: Create a CSS Module File

📄 Button.module.css

🧩 Step 2: Import and Use in Component

📄 Button.js

🔹 React converts .btn into something like:

So it never conflicts with .btn from other components.

🧠 Using Multiple Classes

CSS Modules allow combining multiple class names.

📄 Card.module.css

📄 Card.js

🎯 Dynamic / Conditional Styling

📄 Status.module.css

🧩 Styling Global CSS Inside Modules

To apply a style globally, use :global().

📄 Example:

🚀 Using CSS Modules in Create React App or Vite

No setup needed. Just name your file:

🏁 Summary

🎉 Done! You now fully understand CSS Modules in React.