Kommandoen composes for klasser i CSS modules i React

I denne lektion vil vi se på en meget nyttig metode til genbrug af CSS-stilarter fra én klasse i en anden i CSS modules.

Lad os vende tilbage til applikationen buttons, som vi lavede i de forrige lektioner. Lad os kigge 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;
}

Antag, at vi vil have, at alle knapperne har den samme afrunding og skriftstørrelse. Man kunne selvfølgelig tilføje de samme egenskaber i hver enkelt klasse. Men takket være kommandoen composes fra CSS modules, vil vi gøre det på en anden måde.

Til at starte med, lad os oprette en ekstra klasse, for eksempel common-btn, hvor vi placerer disse ens egenskaber. Og for at anvende egenskaber fra denne klasse i andre, skal man bruge syntaksen:

selector {
	composes: klassens navn;
}

Nu vil koden for vores Buttons.module.css se sådan ud:

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

Tag din React-applikation inputs, som du lavede i opgaverne til de forrige lektioner. Tilføj for alle inputfelter et par stykker ens CSS-stilarter med ens værdier. Opret en ekstra klasse, hvor disse stilarter er skrevet. Med hjælp fra composes, spred dem til alle de andre klasser for inputfelter.