Komponentide failide jaoks CSS moodulites Reactis kasutatav composes-käsk

Käsku composes saab kasutada ka stiilide uuestikasutamiseks ühest failist teises.

Pöördume tagasi rakenduse buttons juurde, mida me tegime eelmistes õppetundides. Oletame, et tahame lisada kõikidele nuppudele samad varjud, kursori stiili ja paksu fondi. Olgu need stiilid paigutatud faili App.module.css. Avame selle faili ja lisame algusesse uue klassi beauty nende stiilidega:

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

Rakendame seda nuppude stiilimiseks. Selleks avame Buttons.module.css ja teeme muudatused klassis common-btn. Me lisame rea käsuga composes, kus määrame klassi nime beauty, mida me tahame rakendada ja faili App.module.css, milles asub see klass:

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

Võtke oma rakenduse kood eelmise õppetunni ülesandest ja tehke mõni vari teie sisendväljadele kasutades selles õppetükis toodud viisi.