Kommandoen composes for filer i CSS modules i React

Kommandoen composes kan også brukes til gjenbruk av stiler fra én fil i en annen.

La oss gå tilbake til applikasjonen buttons, som vi lagde i de foregående leksjonene. La oss anta at vi vil legge til samme skygge, cursor-stil og fet skrift for alle knappene. La disse stilene være plassert i filen App.module.css. La oss åpne denne filen og legge til en ny klasse beauty i begynnelsen med disse stilene:

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

La oss bruke den for å style knappene. For å gjøre dette, la oss åpne Buttons.module.css og gjøre endringer i klassen common-btn. Vi vil legge til en linje med kommandoen composes, der vi spesifiserer navnet på klassen beauty, som vi vil bruke og filen App.module.css, der denne klassen befinner seg:

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

Ta koden til applikasjonen din fra oppgaven i forrige leksjon og lag en skygge til input-feltene dine ved å bruke metoden vist i denne leksjonen.