Kommandot composes för filer i CSS modules i React

Kommandot composes kan även användas för återanvändning av stilar från en fil i en annan.

Låt oss återgå till applikationen buttons, som vi gjorde i tidigare lektioner. Antag att vi vill lägga till samma skuggor, markörstil och fetstil för alla knappar. Låt dessa stilar vara placerade i filen App.module.css. Låt oss öppna den här filen och lägga till en ny klass beauty i början med dessa stilar:

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

Låt oss använda den för att styla knapparna. För att göra detta, öppna Buttons.module.css och gör ändringar i klassen common-btn. Vi kommer att lägga till en rad med kommandot composes, där vi anger klassnamnet beauty, som vi vill använda, och filen App.module.css, där denna klass finns:

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