I moduli CSS forniscono un modo per definire localmente l'ambito dei nomi delle classi CSS. Non devi preoccuparti di sovrascrivere gli stili quando usi lo stesso nome di classe.

Scopri come funzionano i moduli CSS, perché dovresti usarli e come implementarli in un progetto React.

Cosa sono i moduli CSS?

Il Documenti sui moduli CSS descrivi un modulo CSS come un file CSS i cui nomi di classe hanno lo scope locale per impostazione predefinita. Ciò significa che puoi indirizzare variabili CSS con lo stesso nome in diversi file CSS.

Scrivi classi di moduli CSS proprio come le classi normali. Quindi il compilatore genera nomi di classe univoci prima di inviare il CSS al browser.

Ad esempio, considera la seguente classe .btn in un file chiamato styles.modules.css:

.btn {
 larghezza: 90px;
 altezza: 40px;
 imbottitura: 10px 20px;
}

Per utilizzare questo file, devi importarlo in un file JavaScript.

importare stili da "./styles.module.js"

Ora, per fare riferimento alla classe .btn e renderla disponibile in un elemento, dovresti usare la classe come mostrato di seguito:

instagram viewer 
classe="stili.btn"

Il processo di compilazione sostituirà la classe CSS con un nome univoco del formato come _stili__btn_118346908.

L'unicità dei nomi delle classi significa che, anche se si utilizza lo stesso nome di classe per componenti diversi, questi non entreranno in conflitto. Puoi garantire una maggiore indipendenza dal codice poiché puoi memorizzare gli stili CSS di un componente in un unico file, specifico per quel componente.

Questo semplifica il debug, specialmente se stai lavorando con più fogli di stile. Dovrai solo rintracciare il modulo CSS per un particolare componente.

I moduli CSS ti consentono anche di combinare più classi tramite il compone parola chiave. Ad esempio, considera la seguente classe .btn sopra. Potresti "estendere" quella classe in altre classi usando compose.

Per un pulsante di invio, potresti avere:

.btn {
/* stili */
}
.Sottoscrivi {
 compone: btn;
 colore di sfondo: verde;
 colore:#FFFFFF
}

Questo combina le classi .btn e .submit. Puoi anche comporre stili da un altro modulo CSS in questo modo:

.Sottoscrivi {
 compone: primaria da "./colors.css"
 colore di sfondo: verde;
}

Nota che devi scrivere la regola di composizione prima di altre regole.

Come utilizzare i moduli CSS in React

Il modo in cui usi i moduli CSS in React dipende da come crei l'applicazione React.

Se utilizzi create-react-app, i moduli CSS vengono impostati immediatamente. Tuttavia, se hai intenzione di creare l'applicazione da zero, dovrai configurare i moduli CSS con un compilatore come webpack.

Per seguire questo tutorial, dovresti avere:

  • Nodo installato sulla tua macchina.
  • Una conoscenza di base dei moduli ES6.
  • Un fondamento comprensione di Reagire.

Creazione di un'applicazione di reazione

Per mantenere le cose semplici, puoi usare creare-reagire-app per impalcare un'app React.

Esegui questo comando su creare un nuovo progetto React chiamati react-css-modules:

npx creare-react-app react-css-modules

Questo genererà un nuovo file chiamato react-css-modules con tutte le dipendenze necessarie per iniziare con React.

Creazione di un componente pulsante

In questo passaggio creerai un componente Button e un modulo CSS chiamato Button.module.css. Nella cartella src, crea una nuova cartella denominata Components. In quella cartella crea un'altra cartella chiamata Button. In questa cartella aggiungerai il componente Button e i suoi stili.

Navigare verso src/Componenti/Pulsante e crea Button.js.

esportarepredefinitofunzionePulsante() {
Restituzione (
<pulsante>Invia</button>
 )
}

Quindi, crea un nuovo file chiamato Button.module.css e aggiungi quanto segue.

.btn {
 larghezza: 90px;
 altezza: 40px;
 imbottitura: 10px 20px;
 raggio di confine: 4px;
 confine: nessuno;
}

Per utilizzare questa classe nel componente Button, importala come stili e fai riferimento ad essa nel nome della classe dell'elemento button in questo modo:

importare stili da "./Button.module.css"
esportarepredefinitofunzionePulsante() {
Restituzione (
<pulsante nomeclasse={stili.btn}>Invia</button>
 )
}

Questo è un semplice esempio che mostra come utilizzare una singola classe. Potresti voler condividere stili tra diversi componenti o persino combinare classi. Per questo, puoi utilizzare la parola chiave composes come menzionato in precedenza in questo articolo.

Usando la composizione

Innanzitutto, modifica il componente Button con il codice seguente.

importare stili da "./Button.module.css"
esportarepredefinitofunzionePulsante({type="primario", label="pulsante"}) {
Restituzione (
<button className={stili[tipo]}>{etichetta}</button>
 )
}

Questo codice rende il componente Button più dinamico accettando un valore di tipo come prop. Questo tipo determinerà il nome della classe applicato all'elemento del pulsante. Quindi, se il pulsante è un pulsante di invio, il nome della classe sarà "invia". Se è "errore", il nome della classe sarà "errore" e così via.

Per utilizzare la parola chiave composes invece di scrivere da zero tutti gli stili per ciascun pulsante, aggiungi quanto segue a Button.module.css.

.btn {
 larghezza: 90px;
 altezza: 40px;
 imbottitura: 10px 20px;
 raggio di confine: 4px;
 confine: nessuno;
}
.primario {
 compone: btn;
 colore: #FFFFFF;
 colore di sfondo: #6E41E2;
}
.secondario {
 compone: btn;
 colore: #6E41E2;
 colore di sfondo: #FFFFFF;
}

In questo esempio, la classe primaria e la classe secondaria utilizzano la classe btn. In questo modo, riduci la quantità di codice che devi scrivere.

Puoi andare ancora oltre con un modulo CSS esterno chiamato colori.modulo.css, contenente i colori utilizzati nell'applicazione. È quindi possibile utilizzare questo modulo in altri moduli. Ad esempio, crea il file colors.module.css nella radice della cartella Components con il codice seguente:

.primaryBg {
 colore di sfondo: #6E41E2
}
.secondarioBg {
 colore di sfondo: #FFFFFF
}
.colore primario {
 colore: #FFFFFF
}
.secondaryColor {
 colore: #6E41E2
}

Ora nel file Button/Button.module.css, modifica le classi primarie e secondarie per utilizzare le classi precedenti in questo modo:

.primario {
 compone: btn;
 compone: primaryColor da "../colors.module.css";
 compone: primaryBg da "../colors.module.css";
}
.secondario {
 compone: btn;
 compone: secondaryColor da "../colors.module.css";
 compone: secondaryBg da "../colors.module.css";
}

Sass con moduli CSS

Puoi utilizzare i moduli CSS per migliorare la modularità della tua base di codice. Ad esempio, puoi creare una semplice classe CSS per un componente pulsante e riutilizzare le classi CSS attraverso la composizione.

Per potenziare l'uso dei moduli CSS, usa Sass. Sass - Fogli di stile sintatticamente fantastici - è un preprocessore CSS che fornisce un sacco di funzionalità. Includono il supporto per la nidificazione, le variabili e l'ereditarietà che non sono disponibili in CSS. Con Sass puoi aggiungere funzionalità più complesse alla tua applicazione.