Команда composes для классов в CSS modules в React

В этом уроке мы рассмотрим очень полезный прием для переиспользования CSS стилей одного класса в другом в CSS modules.

Вернемся к приложению buttons, которое мы делали на прошлых уроках. Заглянем в файл Buttons.module.css:

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

Предполжим, мы хотим, чтобы у всех кнопочек было одинаковое скругление и размер шрифта. Можно было бы, конечно, наплодить в каждом классе одинаковые свойства. Но благодаря команде composes из CSS modules, мы будем действовать по-другому.

Для начала создадим еще один класс, к примеру common-btn, в который поместим эти одинаковые свойства. А чтобы применить свойства из этого класса в других, нужно использовать в них синтаксис:

cssселектор {
  composes: название класса;
}

Теперь код нашего Buttons.module.css будет выглядеть так:

Buttons.module.css.common-btn {
  font-size: 16px;
  border-radius: 3px;
}

.btn1 {
  composes: common-btn;
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  composes: common-btn;
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  composes: common-btn;
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}