Príkaz composes pre triedy v CSS moduloch v React

V tejto lekcii sa pozrieme na veľmi užitočnú techniku pre opätovné použitie CSS štýlov jednej triedy v inej triede v CSS moduloch.

Vrátime sa k aplikácii buttons, ktorú sme robili na predchádzajúcich lekciách. Pozrime sa na súbor 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;
}

Predpokladajme, že chceme, aby mali všetky tlačidlá rovnaké zaoblenie a veľkosť písma. Samozrejme, bolo by možné do každej triedy pridať rovnaké vlastnosti. Ale vďaka príkazu composes v CSS moduloch budeme konať inak.

Najprv vytvoríme ďalšiu triedu, napríklad common-btn, do ktorej umiestnime tieto rovnaké vlastnosti. A aby sme aplikovali vlastnosti z tejto triedy v iných, musíme použiť syntax:

selektor {
	composes: názov triedy;
}

Teraz bude kód nášho Buttons.module.css vyzerať 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;
}

Vezmite svoju React aplikáciu inputs, ktorú ste robili v úlohách k predchádzajúcim lekciám. Pridajte pre všetky vstupy pár rovnakých CSS štýlov s rovnakými hodnotami. Vytvorte dodatočnú triedu, v ktorej budú napísané tieto štýly. S pomocou composes rozšírte ich do všetkých ostatných tried pre vstupy.