Ukaz composes za datoteke v CSS modulih v Reactu

Ukaz composes se lahko uporabi tudi za ponovno uporabo stilov iz ene datoteke v drugi.

Vrnimo se k aplikaciji buttons, ki smo jo izdelovali v prejšnjih lekcijah. Predpostavimo, da želimo vsem gumbom dodati enake sence, slog kazalca in krepko pisavo. Naj bodo ti slogi nameščeni v datoteki App.module.css. Odprimo to datoteko in na začetek dodajmo nov razred beauty s temi slogi:

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

Uporabimo ga za oblikovanje gumbov. Za to odprimo Buttons.module.css in spremenimo razred common-btn. Dodali bomo vrstico z ukazom composes, kjer bomo navedli ime razreda beauty, ki ga želimo uporabiti, in datoteke App.module.css, v kateri se nahaja ta razred:

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

Vzemite kodo vaše aplikacije iz naloge v prejšnji lekciji in ustvarite kakršno koli senco za vaše vnose z uporabo načina, predstavljenega v tej lekciji.