Команда composes для файлов в CSS modules в React
Команду composes можно применить и для
переиспользования стилей из одного файла
в другом.
Вернемся к приложению buttons,
которое мы делали в предыдущих уроках.
Предположим, мы хотим добавить всем
кнопочкам одинаковые тени, стиль курсора
и жирный шрифт. Пусть эти стили будут
расположены в файле App.module.css.
Давайте откроем этот файл и добавим в
начало новый класс beauty с этими
стилями:
.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, в котором находится
этот класс:
.common-btn {
composes: beauty from "../App.module.css";
font-size: 16px;
border-radius: 3px;
}
Возьмите код вашего приложения из задачи к прошлому уроку и сделайте какую-нибудь тень к вашим инпутам используя способ, приведенный в данном уроке.