CSS moduly v NextJS
NextJS už má vstavanú podporu pre CSS moduly. Sú to samostatné CSS súbory, v ktorých sú mená tried v lokálnom rozsahu viditeľnosti, čo umožňuje vyhnúť sa konfliktom medzi názvami tried z rôznych komponentov.
Pozrime sa, ako ich používať. Predpokladajme, že máme nejaký komponent:
export default function Test() {
return <p>
text text text
</p>;
}
Vytvorme preň CSS modul.
Preto v rovnakom priečinku
vytvorme súbor s príponou
.module.css a ľubovoľným
názvom. V ňom zadefinujme nasledujúcu CSS triedu:
.text {
color: blue;
}
Importujme náš CSS modul do súboru komponentu:
import styles from './test.module.css';
export default function Test() {
return <p>
text text text
</p>;
}
A teraz aplikujme CSS triedu na odsek v našom komponente:
import styles from './test.module.css';
export default function Test() {
return <p className={styles.text}>
text text text
</p>;
}
Vystylujte svoje komponenty pomocou CSS modulov.
