Come applicare uno stile ai componenti React utilizzando i moduli CSS

Come applicare uno stile ai componenti React utilizzando i moduli CSS

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 un ambito 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:



cosa significa questa emoji?? 
.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

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

import styles from "./styles.module.js"

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



class="styles.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 { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

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

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

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.

dove trovare imei su iphone

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 create-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.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

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:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</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.

come trovare le foto di qualcuno che conosci online

Usando la composizione

Innanzitutto, modifica il componente Button con il codice seguente.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #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 { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

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

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../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.