Príkaz composes pre triedy v CSS moduloch v React

V tejto lekcii sa pozrieme na veľmi užitočnú techniku pre opätovné použitie CSS štýlov jednej triedy v inej triede v CSS moduloch.

Vrátime sa k aplikácii buttons, ktorú sme robili na predchádzajúcich lekciách. Pozrime sa na súbor 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;
}

Predpokladajme, že chceme, aby mali všetky tlačidlá rovnaké zaoblenie a veľkosť písma. Samozrejme, bolo by možné do každej triedy pridať rovnaké vlastnosti. Ale vďaka príkazu composes v CSS moduloch budeme konať inak.

Najprv vytvoríme ďalšiu triedu, napríklad common-btn, do ktorej umiestnime tieto rovnaké vlastnosti. A aby sme aplikovali vlastnosti z tejto triedy v iných, musíme použiť syntax:

cssselektor {
  composes: názov triedy;
}

Teraz bude kód nášho Buttons.module.css vyzerať takto:

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