Kommandoen composes for filer i CSS modules i React

Kommandoen composes kan også anvendes til genbrug af stilarter fra én fil i en anden.

Lad os vende tilbage til applikationen buttons, som vi lavede i de foregående lektioner. Antag, at vi vil tilføje alle knapper de samme skygger, cursor-stil og fed skrifttype. Lad disse stilarter være placeret i filen App.module.css. Lad os åbne denne fil og tilføje i begyndelsen en ny klasse beauty med disse stilarter:

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

Lad os anvende den til at style knapperne. For at gøre dette, åbner vi Buttons.module.css og foretager ændringer i klassen common-btn. Vi tilføjer en linje med kommandoen composes, hvor vi angiver navnet på klassen beauty, som vi vil anvende, og filen App.module.css, hvor denne klasse befinder sig:

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

Tag koden fra din applikation fra opgaven i den forrige lektion og lav en eller anden skygge til dine input-felter ved at bruge metoden vist i denne lektion.