Команда composes для класаў у CSS modules у React

У гэтым уроке мы разгледзім вельмі карысны прыём для перавыкарыстання CSS стыляў аднаго класа ў другім у CSS modules.

Вернемся да дадатка buttons, які мы рабілі на мінулых уроках. Зірнем у файл Buttons.module.css:

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, у які змесцім гэтыя аднолькавыя ўласцівасці. А каб прымяніць ўласцівасці з гэтага класа ў іншых, трэба выкарыстоўваць у іх сінтаксіс:

cssселектар {
  composes: назва класа;
}

Цяпер код нашага Buttons.module.css будзе выглядаць так:

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;
}