Kommandot composes för klasser i CSS modules i React

I den här lektionen kommer vi att titta på ett mycket användbart knep för att återanvända CSS-stilar från en klass i en annan i CSS modules.

Låt oss återgå till applikationen buttons, som vi gjorde i de tidigare lektionerna. Låt oss titta i 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;
}

Anta att vi vill att alla knappar ska ha samma rundade hörn och teckenstorlek. Man skulle förstås kunna kopiera in samma egenskaper i varje klass. Men tack vare kommandot composes från CSS modules kommer vi att agera annorlunda.

Först skapar vi ytterligare en klass, till exempel common-btn, där vi placerar dessa gemensamma egenskaper. Och för att applicera egenskaperna från denna klass i andra, behöver du använda syntaxen:

cssselector {
  composes: klassnamn;
}

Nu kommer koden i vår Buttons.module.css att se ut så här:

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