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:
.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:
.common-btn {
composes: beauty from "../App.module.css";
font-size: 16px;
border-radius: 3px;
}
Prendi il codice della tua applicazione dal compito della lezione precedente e crea un'ombra per i tuoi input utilizzando il metodo fornito in questa lezione.