React CSS Модули

Модули CSS позволяют оформлять стили компонента с локально ограниченной областью видимости.

Это предотвращает конфликты имён CSS-классов и упрощает поддержку ваших стилей.

Что такое модули CSS?

В React модули CSS представляют собой файлы CSS, в которых имена классов по умолчанию ограничиваются областью видимости конкретного компонента.

Замечание: Модули CSS не входят в состав основной библиотеки React, однако поддерживаются большинством инструментов сборки проектов на React.

Файлы CSS должны иметь расширение .module.css и могут использоваться путём импорта в ваши файлы React-компонентов.

Создание модуля CSS

Давайте создадим модуль CSS под названием Button.module.css, в котором зададим оформление кнопок.

Пример

Создайте файл с именем Button.module.css и добавьте в него стили:


/* Button.module.css */
.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Использование модуля CSS

Подключите и используйте модуль CSS в вашем компоненте:

Пример

Создаём компонент кнопки, использующий модуль CSS:


import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button className={styles.mybutton}>
        Моя кнопка
      </button>
    </div>
  );
}

Объяснение примера:

  • Мы импортируем объект стилей из модуля CSS.
  • Используем запись styles.mybutton, чтобы применить класс mybutton.
  • Реальное имя класса для кнопки будет уникальным (например, _mybutton_q1obu_1).

Несколько классов одновременно

В предыдущем примере мы использовали лишь один класс, давайте теперь добавим ещё классы:

Пример

Дополните файл Button.module.css новыми стилями:


/* Button.module.css */
.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  background-color: #007bff;
  color: white;
}

.secondary {
  background-color: #6c757d;
  color: white;
}

Чтобы показать изменения, создадим две кнопки с двумя классами для каждой:

Пример

Компонент с двумя кнопками с разными стилями:


import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button className={`${styles.mybutton} ${styles.primary}`}>
        Основная кнопка
      </button>
      <button className={`${styles.mybutton} ${styles.secondary}`}>
        Второстепенная кнопка
      </button>
    </div>
  );
}

Наследование классов

Модули CSS поддерживают объединение классов с помощью ключевого слова composes, позволяющего одному классу наследовать стили другого класса.

Например, в предыдущем примере оба класса primary и secondary зависят от стилей класса mybutton.

Эту зависимость можно определить добавив строку composes: mybutton в объявления обоих классов:

Пример


/* Button.module.css */
.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  composes: mybutton;
  background-color: #007bff;
  color: white;
}

.secondary {
  composes: mybutton;
  background-color: #6c757d;
  color: white;
}

Теперь достаточно применить классы primary и secondary в компоненте:

Пример


import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button className={styles.primary}>
        Первичная кнопка
      </button>
      <button className={styles.secondary}>
        Вторичная кнопка
      </button>
    </div>
  );
}

Глобальные классы

По умолчанию классы в файле .module.css доступны только в том компоненте, который их импортирует. Имя класса автоматически префиксируется уникальным идентификатором, что позволяет избежать конфликтов имён даже при одинаковых названиях классов в разных файлах.

Однако иногда возникает необходимость сделать классы доступными глобально, чтобы использовать их в других компонентах.

Это можно сделать с помощью конструкции :global:

Пример

Вот пример модуля CSS с глобальным классом .myheader:


/* BlueHeader.module.css */
:global(.myheader) {
  padding: 10px 20px;
  font-size: 50px;
  color: white;
  background-color: dodgerblue;
}

Конструкция :global() делает класс доступным для любого компонента.

Достаточно просто вызвать его напрямую как .myheader, без уникального префикса.

Использовать глобальные классы в компонентах можно следующим образом:

Пример


import styles from './BlueHeader.module.css';

function App() {
  return (
    <div>
      <h1 className="myheader">
        Мой заголовок
      </h1>
    </div>
  );
}

Объединение глобальных и локальных классов

Также возможно комбинирование глобальных и локальных классов в одном модуле CSS:

Пример

CSS модуль с глобальным и локальным классами:


/* MyStyles.module.css */
:global(.myheader) {
  padding: 10px 20px;
  font-size: 50px;
  color: white;
  background-color: dodgerblue;
}

.myparagraph {
  font-size: 20px;
  color: white;
  background-color: purple;
}

Применяем их в компонентах следующим образом:

Пример


import styles from './MyStyles.module.css';

function App() {
  return (
    <div>
      <h1 className="myheader">
        Заголовок
      </h1>
      <p className={styles.myparagraph}>
        Параграф
      </p>
    </div>
  );
}