Komanda composes klasēm CSS moduļos React

Šajā nodarbībā mēs apskatīsim ļoti noderīgu paņēmienu CSS stilu atkārtotai izmantošanai no vienas klases citā CSS moduļos.

Atgriezīsimies pie aplikācijas buttons, kuru mēs veidojām iepriekšējās nodarbībās. Ielūkosimies failā 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;
}

Pieņemsim, ka mēs vēlamies, lai visām pogām būtu vienāds noapaļojums un fonta izmērs. Protams, varētu katrā klasē atkārtoti pievienot vienādas īpašības. Bet, pateicoties komandai composes no CSS moduļiem, mēs rīkosies savādāk.

Vispirms izveidosim vēl vienu klasi, piemēram common-btn, kurā ievietosim šīs vienādās īpašības. Un lai izmantotu īpašības no šīs klases citās, tajās ir jāizmanto sintakse:

cssselektors {
  composes: klases nosaukums;
}

Tagad mūsu Buttons.module.css kods izskatīsies šādi:

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