Proprietatea composes pentru clase în CSS modules în React

În această lecție vom analiza o tehnică foarte utilă pentru reutilizarea stilurilor CSS dintr-o clasă în alta în CSS modules.

Să revenim la aplicația buttons, pe care am făcut-o în lecțiile anterioare. Să aruncăm o privire în fișierul 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;
}

Să presupunem că vrem ca tuturor butoanelor să le avem aceeași rotunjire și aceeași dimensiune a fontului. Am putea, desigur, să multiplicăm în fiecare clasă proprietăți identice. Dar datorită proprietății composes din CSS modules, vom proceda altfel.

Pentru început, vom crea încă o clasă, de exemplu common-btn, în care vom pune aceste proprietăți identice. Iar pentru a aplica proprietățile din această clasă în alte clase, trebuie să folosim în ele sintaxa:

cssselector {
  composes: numele clasei;
}

Acum codul nostru Buttons.module.css va arăta astfel:

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