CSS Modules
-
This lesson introduces CSS Modules and explains how to use them for scoped and maintainable styling in React applications.
CSS Modules
What are CSS Modules?
CSS Modules solve the class name conflict problem.
Each class name becomes locally scoped to the component.
Using CSS Modules in React
File Naming:
Button.module.css Example:
/* Button.module.css */
.btn {
background-color: blue;
color: white;
}
import styles from "./Button.module.css";
<button className={styles.btn}>Click</button>
Benefits:
No class conflicts
Cleaner code
Better for large apps