Команда 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;
}