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:

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

selector {
	composes: klasse navn;
}

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

.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 React-applikasjonen din inputs, som du lagde i oppgavene til forrige leksjoner. Legg til et par like CSS-stiler med like verdier for alle input-feltene. Opprett en ekstra klasse der disse stilene er skrevet. Med hjelp av composes, spre dem til alle de andre klassene for input-feltene.