Příkaz composes pro soubory v CSS modules v Reactu

Příkaz composes lze použít i pro znovupoužití stylů z jednoho souboru v jiném.

Vraťme se k aplikaci buttons, kterou jsme vytvářeli v předchozích lekcích. Předpokládejme, že chceme přidat všem tlačítkům stejné stíny, styl kurzoru a tučné písmo. Nechť jsou tyto styly umístěny v souboru App.module.css. Otevřeme tento soubor a přidejme na začátek novou třídu beauty s těmito styly:

.beauty { 
	box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
	font-weight: bold;
	cursor: pointer;
}

Aplikujme jej pro stylizaci tlačítek. K tomu otevřeme Buttons.module.css a provedeme změny ve třídě common-btn. Přidáme řádek s příkazem composes, kde uvedeme název třídy beauty, kterou chceme použít a souboru App.module.css, ve kterém se nachází tato třída:

.common-btn {
	composes: beauty from "../App.module.css"; 
	font-size: 16px;
	border-radius: 3px;
}

Vezměte kód vaší aplikace z úkolu k předchozí lekci a vytvořte nějaký stín pro vaše vstupy pomocí způsobu uvedeného v této lekci.