Příkaz composes pro třídy v CSS modules v Reactu

V této lekci se podíváme na velmi užitečnou techniku pro znovupoužití CSS stylů jedné třídy v jiné v CSS modules.

Vraťme se k aplikaci buttons, kterou jsme vytvářeli v předchozích lekcích. Podívejme se do souboru 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;
}

Předpokládejme, že chceme, aby všechna tlačítka měla stejné zaoblení a velikost písma. Samozřejmě bychom mohli v každé třídě opakovat stejné vlastnosti. Ale díky příkazu composes z CSS modules budeme postupovat jinak.

Nejprve vytvoříme další třídu, například common-btn, do které umístíme tyto společné vlastnosti. A abychom použili vlastnosti z této třídy v jiných, je třeba použít v nich syntaxi:

selektor {
	composes: název třídy;
}

Nyní bude kód našeho Buttons.module.css vypadat takto:

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

Vezměte svou React aplikaci inputs, kterou jste vytvářeli v úlohách k předchozím lekcím. Přidejte pro všechny inputy pár společných CSS stylů se stejnými hodnotami. Vytvořte dodatečnou třídu, ve které budou tyto styly napsány. S pomocí composes je rozšiřte do všech ostatních tříd pro inputy.