Iniziare a studiare la stilizzazione con CSS modules in React

In questa e nelle prossime lezioni, considereremo un altro approccio moderno ed efficiente per la stilizzazione dei componenti React - l'uso dei CSS modules.

CSS modules in questo approccio sono file CSS compilati separati, in cui i nomi delle classi e delle animazioni si trovano in un ambito locale, il che permette di evitare conflitti tra i nomi delle classi di componenti diversi.

Per iniziare, creiamo e avviamo la nostra semplice applicazione React buttons. Per farlo, creiamo una cartella vuota test, entriamo in essa e nel terminale scriviamo i seguenti comandi:

npx create-react-app buttons
cd buttons
npm start

Se hai una versione recente di React, cioè che supporta Create React App v2 e superiore, non è necessario fare alcuna configurazione aggiuntiva, poiché in questo caso i CSS modules saranno supportati automaticamente. Per verificarlo, controlla in package.json, se la dipendenza react-scripts è versione 2.x.x o superiore, allora è tutto a posto. Altrimenti aggiorna il tuo React.

La nostra applicazione per la stilizzazione con il metodo CSS modules conterrà tre pulsanti.

Chiameremo i file CSS, seguendo la convenzione, nel modo seguente: [name].module.css.

Creiamo ora la cartella components in src, e aggiungiamoci il file Buttons.module.css con gli stili CSS per i nostri pulsanti:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Inoltre, nella cartella components, creiamo il file vuoto del componente React Buttons.js, intanto non toccate il file generato App.js, ci occuperemo di esso più tardi!

In Buttons.js importiamo obbligatoriamente il file con gli stili CSS, e applichiamo questi stili ad ogni pulsante usando l'attributo class:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

A proposito, non è obbligatorio usare la parola styles per il nome dell'oggetto importato con gli stili, puoi chiamarlo come ti è più comodo.

Nella prossima lezione completeremo la nostra applicazione.

Seguendo la teoria di questa lezione, genera l'applicazione React inputs.

Usa l'approccio CSS modules, fornito nella lezione. Crea in src dell'applicazione inputs il file Inputs.js per il componente React Inputs, che conterrà tre input. Scrivi un paio di stili in Inputs.modules.css per gli input. Importa questo file in Inputs.js e applica gli stili.