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

Узнайте, как работают модули CSS, почему вы должны их использовать и как реализовать их в проекте React.

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

Документация по модулям CSS опишите модуль CSS как файл CSS, имена классов которого по умолчанию имеют локальную область видимости. Это означает, что вы можете обращаться к переменным CSS с одним и тем же именем в разных файлах CSS.

Вы пишете классы модуля CSS так же, как обычные классы. Затем компилятор генерирует уникальные имена классов перед отправкой CSS в браузер.

Например, рассмотрим следующий класс .btn в файле styles.modules.css:

.btn {
 ширина: 90 пикселей;
 высота: 40 пикселей;
 отступ: 10px 20px;
}

Чтобы использовать этот файл, вы должны импортировать его в файл JavaScript.

импорт стили из "./styles.module.js"

Теперь, чтобы сослаться на класс .btn и сделать его доступным в элементе, вы должны использовать класс, как показано ниже:

instagram viewer 
учебный класс="styles.btn"

Процесс сборки заменит класс CSS уникальным именем формата, например _styles__btn_118346908.

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

Это упрощает отладку, особенно если вы работаете с несколькими таблицами стилей. Вам нужно будет только отследить модуль CSS для определенного компонента.

Модули CSS также позволяют комбинировать несколько классов с помощью сочиняет ключевое слово. Например, рассмотрим следующий класс .btn выше. Вы можете «расширить» этот класс в других классах, используя композицию.

Для кнопки отправки вы могли бы иметь:

.btn {
/* стили */
}
.Разместить {
 составляет: бтн;
 цвет фона: зеленый;
 цвет:#FFFFFF
}

Это объединяет классы .btn и .submit. Вы также можете создавать стили из другого модуля CSS следующим образом:

.Разместить {
 составляет: первичный из "./colors.css"
 цвет фона: зеленый;
}

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

Как использовать CSS-модули в React

То, как вы используете модули CSS в React, зависит от того, как вы создаете приложение React.

Если вы используете приложение create-react-app, CSS-модули настраиваются «из коробки». Однако, если вы собираетесь создавать приложение с нуля, вам потребуется настроить модули CSS с помощью компилятора, такого как webpack.

Чтобы следовать этому руководству, у вас должно быть:

  • Node установлен на вашем компьютере.
  • Базовое понимание модулей ES6.
  • Базовый понимание Реакта.

Создание React-приложения

Чтобы упростить задачу, вы можете использовать создать-реагировать-приложение для создания шаблона приложения React.

Запустите эту команду, чтобы создать новый проект React называемые реагирующими css-модулями:

npx Создайте-react-app реагировать-css-модули

Это создаст новый файл с именем react-css-modules со всеми зависимостями, необходимыми для начала работы с React.

Создание компонента кнопки

На этом шаге вы создадите компонент Button и модуль CSS с именем Button.module.css. В папке src создайте новую папку с именем Components. В этой папке создайте еще одну папку с именем Button. В эту папку вы добавите компонент Button и его стили.

Перейдите к источник/Компоненты/Кнопка и создайте Button.js.

экспортдефолтфункцияКнопка() {
возвращаться (
<кнопка>Представлять на рассмотрение</button>
 )
}

Затем создайте новый файл с именем Button.module.css и добавьте следующее.

.btn {
 ширина: 90 пикселей;
 высота: 40 пикселей;
 отступ: 10px 20px;
 радиус границы: 4px;
 граница: нет;
}

Чтобы использовать этот класс в компоненте «Кнопка», импортируйте его как стили и укажите ссылку на него в имени класса элемента кнопки следующим образом:

импорт стили из "./Кнопка.модуль.css"
экспортдефолтфункцияКнопка() {
возвращаться (
<кнопка className={styles.btn}>Представлять на рассмотрение</button>
 )
}

Это простой пример, который показывает, как использовать один класс. Вы можете использовать общие стили для разных компонентов или даже комбинировать классы. Для этого вы можете использовать ключевое слово composes, как упоминалось ранее в этой статье.

Использование композиции

Сначала измените компонент Button с помощью следующего кода.

импорт стили из "./Кнопка.модуль.css"
экспортдефолтфункцияКнопка({type="основной", label="Кнопка"}) {
возвращаться (
<кнопка className = {стили [тип]}>{этикетка}</button>
 )
}

Этот код делает компонент Button более динамичным, принимая значение типа в качестве реквизита. Этот тип будет определять имя класса, применяемое к элементу кнопки. Поэтому, если кнопка является кнопкой отправки, имя класса будет «отправить». Если это «ошибка», имя класса будет «ошибка» и так далее.

Чтобы использовать ключевое слово composes вместо написания всех стилей для каждой кнопки с нуля, добавьте следующее в Button.module.css.

.btn {
 ширина: 90 пикселей;
 высота: 40 пикселей;
 отступ: 10px 20px;
 радиус границы: 4px;
 граница: нет;
}
.начальный {
 составляет: бтн;
 цвет: #FFFFFF;
 фоновый цвет: #6E41E2;
}
.вторичный {
 составляет: бтн;
 цвет: #6E41E2;
 фоновый цвет: #FFFFFF;
}

В этом примере первичный класс и вторичный класс используют класс btn. Делая это, вы уменьшаете количество кода, который вам нужно написать.

Вы можете пойти еще дальше с помощью внешнего модуля CSS, называемого цвета.модуль.css, содержащий цвета, используемые в приложении. Затем вы можете использовать этот модуль в других модулях. Например, создайте файл colors.module.css в корне папки Components со следующим кодом:

.primaryBg {
 фоновый цвет: #6E41E2
}
.secondaryBg {
 фоновый цвет: #FFFFFF
}
.Основной цвет {
 цвет: #FFFFFF
}
.вторичный цвет {
 цвет: #6E41E2
}

Теперь в файле Button/Button.module.css измените первичный и вторичный классы, чтобы использовать вышеуказанные классы следующим образом:

.начальный {
 составляет: бтн;
 составляет: основной цвет из "../colors.module.css";
 составляет: primaryBg от "../colors.module.css";
}
.вторичный {
 составляет: бтн;
 составляет: вторичный цвет из "../colors.module.css";
 составляет: вторичныйBg от "../colors.module.css";
}

Sass с модулями CSS

Вы можете использовать модули CSS, чтобы улучшить модульность вашей кодовой базы. Например, вы можете создать простой класс CSS для компонента кнопки и повторно использовать классы CSS через композицию.

Чтобы расширить возможности использования модулей CSS, используйте Sass. Sass — Syntactically Awesome Style Sheets — это препроцессор CSS, который предоставляет массу возможностей. Они включают поддержку вложенности, переменных и наследования, которые недоступны в CSS. С помощью Sass вы можете добавить в свое приложение более сложные функции.