CSS-модули NextJS-ում

NextJS-ում արդեն կա ներկառուցված աջակցություն CSS-модулиների համար: Դրանք առանձին CSS ֆայլեր են, որոնցում դասերի անունները gտեղաբաշխված են տեղային տեսանելիության տարածքում, ինչը թույլ է տալիս խուսափել կոնֆլիկտներից դասերի անունների միջև տարբեր կոմպոնենտներից:

Եկեք նայենք, թե ինչպես օգտագործել դրանք: Ենթադրենք, մենք ունենք որոշակի կոմպոնենտ.

app/test/page.jsxexport default function Test() {
  return <p>
    text text text
  </p>;
}

Եկեք ստեղծենք դրա համար CSS-модуль: Դրա համար նույն պանակում կստեղծենք ֆայլ ընդլայնումով .module.css և կամայական անունով: Դրանում կգրենք հետևյալ CSS դասը.

app/test/test.module.css.text {
  color: blue;
}

Կներմուծենք մեր CSS մոդուլը կոմպոնենտի ֆայլում.

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p>
    text text text
  </p>;
}

Իսկ հիմա կկիրառենք CSS դասը մեր կոմպոնենտի ներսում գտնվող պարբերության համար.

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p className={styles.text}>
    text text text
  </p>;
}