Команда composes для классов в CSS modules в React
В этом уроке мы рассмотрим очень полезный прием для переиспользования CSS стилей одного класса в другом в CSS modules.
Вернемся к приложению buttons, которое
мы делали на прошлых уроках. Заглянем в файл
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, в который поместим
эти одинаковые свойства. А чтобы применить
свойства из этого класса в других, нужно
использовать в них синтаксис:
селектор {
composes: название класса;
}
Теперь код нашего 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;
}
Возьмите свое React приложение inputs,
которое вы делали в задачах к прошлым
урокам. Добавьте для всех инпутов парочку
одинаковых CSS стилей с одинаковыми
значениями. Создайте дополнительный класс,
в котором будут написаны эти стили. С
помощью composes растиражируйте
их по всем остальным классам для инпутов.