Comanda composes pentru fișiere în CSS modules în React

Comanda composes poate fi aplicată și pentru reutilizarea stilurilor dintr-un fișier în altul.

Să revenim la aplicația buttons, pe care am făcut-o în lecțiile anterioare. Să presupunem că vrem să adăugăm tuturor butoanelor aceleași umbre, stil de cursor și font îngroșat. Să fie aceste stiluri plasate în fișierul App.module.css. Să deschidem acest fișier și să adăugăm la început o nouă clasă beauty cu aceste stiluri:

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

Să o aplicăm pentru stilizarea butoanelor. Pentru aceasta să deschidem Buttons.module.css și să facem modificări în clasa common-btn. Vom adăuga linia cu comanda composes, unde vom indica numele clasei beauty, pe care vrem să o aplicăm și fișierul App.module.css, în care se află această clasă:

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