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:

.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:

selector {
	composes: klassnamn;
}

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

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

Ta din React-applikation inputs, som du gjorde i uppgifterna till tidigare lektioner. Lägg till ett par gemensamma CSS-stilar med samma värden för alla inputfält. Skapa en extra klass dessa stilar skrivs. Med hjälp av composes, sprid dem till alla andra klasser för inputfälten.