Continuazione dello studio della stilizzazione con CSS modules React

Continuiamo a lavorare sulla nostra applicazione buttons. Ora occupiamoci del componente principale App, che era già stato generato nella cartella src inizialmente. In esso avremo due div, un titolo e un pulsante.

Rinomina il file App.css in App.module.css secondo la convenzione, puliscilo e crea al suo interno diverse classi con stili CSS per i tag:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Ora pulisci il contenuto del file App.js. Quindi importa il componente React Buttons e gli stili da App.module.css. Scriviamo i nostri tag e applichiamo ad essi gli stili, e posizioniamo il componente React Buttons:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Abbiamo usato la parola classes per il nome dell'oggetto che contiene gli stili, che importiamo da App.module.css. Come nel caso precedente, puoi nominare questo oggetto come preferisci.

Rimangono un paio di piccoli passi. Cambia il nome del file index.css secondo la convenzione in index.module.css e nel file index.js non dimenticare di sostituire la riga di importazione:

import "./index.css";

Con la riga:

import "./index.module.css";

Ora possiamo vedere nel browser il risultato del lavoro della nostra applicazione.

Se apri il markup generato nel pannello dello sviluppatore nel browser, vedrai che ogni componente ha le sue classi uniche generate. In questo modo, non dobbiamo più preoccuparci dei conflitti tra le classi dei singoli componenti.

È importante anche che i CSS modules non vietano di importare normali file CSS esterni.

Seguendo la teoria della lezione, pulisci il componente React App della tua applicazione inputs, che hai creato nei compiti della lezione precedente, e posiziona in esso il tuo Inputs in qualche div stilizzato. Aggiungi in App un titolo stilizzato. Tutto questo mettilo in un altro div. Gli stili per i tag del componente React App scrivili in App.modules.css.

Metti tutto insieme, collega correttamente i file rimanenti e avvia la tua applicazione inputs.