De composes opdracht voor classes in CSS modules in React

In deze les bekijken we een zeer nuttige techniek om CSS-stijlen van de ene klasse in een andere te hergebruiken in CSS modules.

Laten we terugkeren naar de applicatie buttons, die we in de vorige lessen hebben gemaakt. Laten we eens kijken in het bestand 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;
}

Stel, we willen dat alle knoppen dezelfde afronding en lettergrootte hebben. We zouden natuurlijk in elke klasse dezelfde eigenschappen kunnen toevoegen. Maar dankzij de opdracht composes van CSS modules, gaan we het anders aanpakken.

Laten we eerst een extra klasse aanmaken, bijvoorbeeld common-btn, waarin we deze gemeenschappelijke eigenschappen plaatsen. En om de eigenschappen uit deze klasse in andere toe te passen, moeten we in hen de syntaxis gebruiken:

selector {
	composes: klassenaam;
}

Nu ziet de code van onze Buttons.module.css er als volgt uit:

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

Neem je React applicatie inputs, die je hebt gemaakt in de taken bij vorige lessen. Voeg voor alle invoervelden een paar gemeenschappelijke CSS-stijlen toe met dezelfde waarden. Maak een extra klasse aan waarin deze stijlen zijn geschreven. Gebruik composes om ze te verspreiden over alle andere klassen voor de invoervelden.