Komanda composes failiem CSS moduļos React

Komandu composes var izmantot arī, lai atkārtoti izmantotu stilu no viena faila citā.

Atgriezīsimies pie aplikācijas buttons, ko mēs veidojām iepriekšējās nodarbībās. Pieņemsim, ka mēs vēlamies visām pogām pievienot identiskas ēnas, kursora stilu un treknrakstā fontu. Ļaujiet šiem stiliem atrasties failā App.module.css. Atvērsim šo failu un sākumā pievienosim jaunu klasi beauty ar šiem stiliem:

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

Izmantosim to, lai noformētu pogas. Lai to izdarītu, atveram Buttons.module.css un veicam izmaiņas klasē common-btn. Mēs pievienosim rindu ar komandu composes, kur norādīsim klases beauty nosaukumu, ko mēs vēlamies izmantot, un faila App.module.css nosaukumu, kurā atrodas šī klase:

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

Paņemiet savas aplikācijas kodu no iepriekšējās nodarbības uzdevuma un izveidojiet kādu ēnu jūsu ievadlaukiem, izmantojot šajā nodarbībā aprakstīto metodi.