CSS-moodulid NextJS-is
NextJS-s on juba sisseehitatud tugi CSS-moodulitele. Need on eraldiseisvad CSS-failid, kus klassinimed asuvad kohalikus ulatuses, mis võimaldab vältida konflikte klassinimede erinevatest komponentidest.
Vaatame, kuidas neid kasutada. Oletame, et meil on mingi komponent:
export default function Test() {
return <p>
text text text
</p>;
}
Loome selle jaoks CSS-mooduli.
Selleks teeme samas kaustas
faili laiendiga
.module.css ja suvalise
nimega. Kirjutame sinna järgmise CSS klassi:
.text {
color: blue;
}
Impordime oma CSS mooduli komponendi faili:
import styles from './test.module.css';
export default function Test() {
return <p>
text text text
</p>;
}
Ja nüüd rakendame CSS klassi meie komponendi sees olevale lõigule:
import styles from './test.module.css';
export default function Test() {
return <p className={styles.text}>
text text text
</p>;
}
Stiilige oma komponente CSS-moodulite abil.
