CSS Modules
.module.css, EXTENSION, waali, files, CSS, MODULES, treat, ki, jaati, HAIN — Next.js, mein, BUILT-IN, SUPPORT, hai — CLASS, names, LOCALLY, SCOPED, HOTE, HAIN, HAR, COMPONENT, ke, liye.
CSS, Modules, se, GLOBAL, CSS, CONFLICTS, se, BACHA, ja, sakta hai — jaise, DO, ALAG, COMPONENTS, mein, .button, class, use, karne, PAR, bhi, WOH, EK, DUSRE, ko, AFFECT, NAHI, karengi.
/* Button.module.css */
.primary {
background: blue;
color: white;
}
// Button.js:
import styles from "./Button.module.css";
export default function Button() {
return <button className={styles.primary}>Click me</button>;
}- .module.css files, LOCALLY, SCOPED, styles, dete, hain
- Naming, CONFLICTS, AVOID, karte, HAIN, MULTIPLE, components, ke, BEECH
- Next.js, mein, ZERO-CONFIG, BUILT-IN, SUPPORT, hai
CSS, Modules, mein, composes, KEYWORD, se, EK, CLASS, ki, styles, ko, DUSRI, mein, "COMPOSE" (INHERIT) kiya, ja, sakta hai — DRY, styling, ke, liye.
.base { padding: 10px; }
.primary { composes: base; background: blue; }app/globals.css, (root, layout, mein, import, ki, gayi) POORI, application, ke, liye, GLOBAL, styles, deती, hai — CSS, Modules, ke, saath, hi, USE, ho, sakti, hai, COMPONENT-SPECIFIC, aur, GLOBAL, styles, ke, BEECH, EK, CLEAR, SEPARATION, ke, saath.