Kommandoen composes for klasser i CSS modules i React

I denne leksjonen skal vi se på en veldig nyttig teknikk for gjenbruk av CSS-stiler fra en klasse i en annen i CSS modules.

La oss gå tilbake til applikasjonen buttons som vi lagde i forrige leksjoner. La oss se på filen 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;
}

La oss anta at vi vil at alle knappene skal ha samme avrunding og skriftstørrelse. Man kunne selvfølgelig ha lagt til de samme egenskapene i hver enkelt klasse. Men takket være kommandoen composes fra CSS modules, vil vi gjøre det annerledes.

Til å begynne med, la oss opprette en ny klasse, for eksempel common-btn, der vi plasserer disse like egenskapene. Og for å bruke egenskapene fra denne klassen i andre, må man bruke syntaksen:

cssselector {
  composes: klasse navn;
}

Nå vil koden vår i Buttons.module.css se slik ut:

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