Ukaz composes za razrede v CSS modulih v React

V tej lekciji bomo obravnavali zelo uporaben postopek za ponovno uporabo CSS slogov enega razreda v drugem v CSS modulih.

Vrnimo se k aplikaciji buttons, ki smo jo izdelovali v prejšnjih lekcijah. Poglejmo v datoteko 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;
}

Recimo, da želimo, da imajo vse gumbi enako zaobljenost in velikost pisave. Seveda bi lahko v vsakem razredu podvojili enake lastnosti. Toda zahvaljujoč ukazu composes iz CSS modulov, bomo ravnali drugače.

Za začetek ustvarimo še en razred, na primer common-btn, v katerega bomo postavili te enake lastnosti. In da bi uporabili lastnosti iz tega razreda v drugih, moramo uporabiti sintakso:

cssselektor {
  composes: ime razreda;
}

Zdaj bo koda našega Buttons.module.css izgledala takole:

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