Comanda composes za klase u CSS modulima u React-u

U ovoj lekciji ćemo razmotriti veoma koristan prijem za ponovno korišćenje CSS stilova jedne klase u drugoj u CSS modulima.

Vratimo se na aplikaciju buttons, koju smo pravili na prethodnim lekcijama. Pogledajmo u fajl 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;
}

Pretpostavimo da želimo da svi dugmići imaju isto zaobljenje i veličinu fonta. Mogli bismo, naravno, da u svakoj klasi ponavljamo ista svojstva. Ali zahvaljujući komandi composes iz CSS modula, postupićemo drugačije.

Za početak kreirajmo još jednu klasu, na primer common-btn, u koju ćemo smestiti ta ista svojstva. A da bismo primenili svojstva iz ove klase u drugim, potrebno je da u njima koristimo sintaksu:

cssselektor {
  composes: naziv klase;
}

Sada će kod našeg Buttons.module.css izgledati ovako:

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