Comando composes per file in CSS modules in React

Il comando composes può essere applicato anche per riutilizzare gli stili da un file in un altro.

Torniamo all'applicazione buttons, che abbiamo realizzato nelle lezioni precedenti. Supponiamo di voler aggiungere a tutti i pulsanti le stesse ombre, lo stile del cursore e il font in grassetto. Lascia che questi stili siano posizionati nel file App.module.css. Apriamo questo file e aggiungiamo all'inizio una nuova classe beauty con questi stili:

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

Applichiamolo per stilizzare i pulsanti. Per fare questo, apriamo Buttons.module.css e apportiamo modifiche alla classe common-btn. Aggiungeremo una riga con il comando composes, dove specificheremo il nome della classe beauty, che vogliamo applicare, e il file App.module.css, in cui si trova questa classe:

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