CSS-modules in NextJS
NextJS het ingeboude ondersteuning vir CSS-modules. Dit is aparte CSS-lêers waarin klassename in 'n plaaslike omvang is, wat konflik tussen klassename van verskillende komponente voorkom.
Laat ons kyk hoe om dit te gebruik. Kom ons sê ons het 'n sekere komponent:
export default function Test() {
return <p>
text text text
</p>;
}
Laat ons 'n CSS-module daarvoor skep.
Om dit te doen, in dieselfde gids
maak 'n lêer met die uitbreiding
.module.css en 'n enige
naam. Skryf die volgende CSS-klas daarin:
.text {
color: blue;
}
Voer ons CSS-module in die komponentlêer in:
import styles from './test.module.css';
export default function Test() {
return <p>
text text text
</p>;
}
En laat ons nou die CSS-klas toepas op die paragraaf binne ons komponent:
import styles from './test.module.css';
export default function Test() {
return <p className={styles.text}>
text text text
</p>;
}
Styl jou komponente met behulp van CSS-modules.
