Команда composes для файлов в CSS modules в React

Команду composes можно применить и для переиспользования стилей из одного файла в другом.

Вернемся к приложению buttons, которое мы делали в предыдущих уроках. Предположим, мы хотим добавить всем кнопочкам одинаковые тени, стиль курсора и жирный шрифт. Пусть эти стили будут расположены в файле App.module.css. Давайте откроем этот файл и добавим в начало новый класс beauty с этими стилями:

App.module.css.beauty { 
  box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
  font-weight: bold;
  cursor: pointer;
}

Давайте применим его для стилизации кнопочек. Для этого откроем Buttons.module.css и внесем изменения в класс common-btn. Мы добавим строку с командой composes, где укажем название класса beauty, который мы хотим применить и файла App.module.css, в котором находится этот класс:

Buttons.module.css.common-btn {
  composes: beauty from "../App.module.css"; 
  font-size: 16px;
  border-radius: 3px;
}