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:

App.module.css.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:

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