CSS-модулі ў NextJS

У NextJS ужо ёсць убудаваная падтрымка CSS-модуляў. Яны представляюць сабой асобныя CSS файлы, у якіх імёны класаў знаходзяцца ў лакальнай вобласці бачнасці, што дазваляе пазбегнуць канфліктаў паміж імёнамі класаў з розных кампанентаў.

Давайце паглядзім, як імі карыстацца. Хай у нас ёсць нейкі кампанент:

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>;
}