# Команда 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` растиражируйте их по всем остальным классам для инпутов.

← →
↑