React: usare i moduli CSS

I moduli CSS in React sono un approccio di organizzazione e gestione dello stile all'interno di un'applicazione. React, essendo una libreria per la creazione di interfacce utente, consente di costruire componenti riutilizzabili che possono essere composti per creare l'intera UI dell'applicazione. Tuttavia, la gestione dello stile all'interno di questi componenti può diventare complessa quando l'applicazione cresce in dimensioni e complessità.

I moduli CSS in React risolvono questo problema fornendo una soluzione per isolare e modulare lo stile dei componenti. Invece di avere un unico file CSS globale per l'intera applicazione, ogni componente può avere il proprio file CSS associato. Questo permette di definire lo stile specifico di un componente senza interferire con gli altri componenti.

L'utilizzo dei moduli CSS in React è piuttosto semplice. Per creare un modulo CSS per un componente, basta creare un file CSS con un nome univoco, ad esempio NomeComponente.module.css. All'interno di questo file, è possibile definire le regole CSS specifiche per quel componente utilizzando la sintassi standard CSS.

Una volta creato il modulo CSS, è possibile importarlo nel componente React in cui si desidera utilizzarlo. Per fare ciò, basta aggiungere una dichiarazione di importazione nel file del componente, come ad esempio import styles from './NomeComponente.module.css'. In questo modo, l'oggetto styles conterrà una mappatura di tutte le classi CSS definite nel modulo.

Per applicare uno stile a un elemento nel componente, basta utilizzare la sintassi JSX e utilizzare le classi definite nel modulo CSS. Ad esempio, se nel modulo CSS è definita una classe .container, è possibile applicarla a un elemento nel componente utilizzando la sintassi className={styles.container}.

Ad esempio, dato questo modulo CSS Container.module.css:

.container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

Possiamo applicarlo al componente Container.js in questo modo:

import styles from './Container.module.css';

function Container({ children }) {
    return (
        <div className={styles.container}>
            {children}
        </div>
    );
}

export default Container;

L'uso dei moduli CSS in React rende più facile organizzare e gestire lo stile all'interno di un'applicazione React. Ogni componente può definire il proprio stile in modo isolato, evitando collisioni di stili tra i componenti. Inoltre, i moduli CSS promuovono il riutilizzo del codice, in quanto i componenti possono essere facilmente spostati o copiati in altre parti dell'applicazione senza dover modificare manualmente lo stile.