Модулі CSS - це підхід, який дозволяє локально застосовувати імена класів CSS до певних компонентів. Він надає можливість писати CSS код модульно та інкапсульовано, зменшуючи ймовірність конфліктів стилів та роблячи стилі більш зручними для супроводу. Фактично, він став одним з найпоширеніших підходів для організації React-проектів.

Організація файлів і папок

Припустимо, що у нас є наступний інтерфейс користувача, який складається з трьох компонентів: VideoPlayer, AuthorInformation та VideoDescription.

Ми не будемо об'єднувати всі компоненти і стилі в один файл. Замість цього ми створимо окрему папку для кожного компонента. У кожній папці ми створимо файл jsx для рендерингу та логіки і файл css для застосування стилів. Кожен css файл повинен мати module.css в кінці для досягнення модульності. Таким чином, структура буде виглядати наступним чином:

Примітка

Цей підхід пропонує зручне рішення для створення React-компонентів та стилів написання. Він гарантує, що кожен компонент ізольований і може бути ефективно використаний повторно. Локальне масштабування імен класів покращує організацію коду, сприяє повторному використанню та уникає конфліктів стилів.

Синтаксис

Давайте розглянемо синтаксис використання модульних стилів для компонента на прикладі компонента VideoDescription.

Усередині VideoDescription.jsx ми створюємо компонент, який генерує певну розмітку. У цьому немає нічого особливо нового або незнайомого.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Різниця виникає, коли ми хочемо застосувати ім'я класу. По-перше, ми повинні імпортувати файл VideoDescription.module.css у файл VideoDescription.jsx. Ми можемо зробити це, використовуючи наступний синтаксис:

import <file_name> from "<file_path>";

• <file_name> може бути будь-яким словом, яке ми асоціюємо з файлом. Як правило, ім'я задається на кшталт: css, styles або просто s.
• <file_path> - це правильний шлях до файлу. Синтаксис ми вже знаємо: ./.

Результат:

import css from "./VideoDescription.module.css";

Щоб призначити ім'я класу елементу, ми можемо використати атрибут className. У цьому атрибуті ми вкладаємо потрібну назву класу у фігурні дужки {}. Всередині фігурних дужок ми додаємо певне слово, пов'язане з файлом стилів, за яким слідує крапка . та ім'я класу. Результат: className={css.text}. text - це справжнє ім'я класу.

import css from "./VideoDescription.module.css";

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Тепер ми можемо відкрити файл VideoDescription.module.css і застосувати стилі до елемента p з назвою класу text за допомогою селектора класів:

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}