Reguła composes dla klas w CSS modules w React

W tej lekcji przyjrzymy się bardzo przydatnej metodzie na ponowne wykorzystanie stylów CSS jednej klasy w innej w CSS modules.

Wróćmy do aplikacji buttons, którą robiliśmy na poprzednich lekcjach. Spójrzmy na plik 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;
}

Załóżmy, że chcemy, aby wszystkie przyciski miały takie samo zaokrąglenie i rozmiar czcionki. Oczywiście, można by powielić te same właściwości w każdej klasie. Ale dzięki regule composes z CSS modules, będziemy postępować inaczej.

Na początku utwórzmy kolejną klasę, na przykład common-btn, do której umieścimy te wspólne właściwości. Aby zastosować właściwości z tej klasy w innych, należy użyć w nich składni:

selektor {
	composes: nazwa klasy;
}

Teraz kod naszego Buttons.module.css będzie wyglądać tak:

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

Weź swoją aplikację React inputs, którą robiłeś w zadaniach do poprzednich lekcji. Dodaj dla wszystkich pól input kilka wspólnych stylów CSS z tymi samymi wartościami. Utwórz dodatkową klasę, w której będą zapisane te style. Za pomocą composes rozpropaguj je do wszystkich innych klas dla inputów.