A composes parancs CSS modulokban lévő osztályokhoz Reactben

Ebben a leckében egy nagyon hasznos technikát fogunk megvizsgálni a CSS stílusok újrafelhasználására egy osztályból egy másikba CSS modulokban.

Térjünk vissza a buttons alkalmazáshoz, amelyet az előző leckéken készítettünk. Nézzük meg a Buttons.module.css fájlt:

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

Tegyük fel, hogy azt szeretnénk, ha minden gombnak ugyanaz a lekerekítése és betűmérete lenne. Természetesen lehetne minden osztályba ugyanazokat a tulajdonságokat bemásolni. De a CSS modulok composes parancsának köszönhetően másképp fogunk cselekedni.

Először hozzunk létre egy másik osztályt, például common-btn, amelybe helyezzük ezeket az azonos tulajdonságokat. És hogy alkalmazni tudjuk az osztály tulajdonságait másokban, az alábbi szintaxist kell használni bennük:

cssszelektor {
  composes: osztály neve;
}

Most a Buttons.module.css kódja így fog kinézni:

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