Utilizzo del CSS globale per lo stile in React

Supponiamo di avere un componente React App, che contiene un div, e all'interno del div - tre paragrafi:

function App() {
	return (
		<div>
			<p>testo</p>
			<p>testo</p>
			<p>testo</p>
		</div>
	);
}

Adesso stilizziamo questo componente. Per farlo, nella stessa cartella src con il nostro componente creeremo un normale file CSS con gli stili styles.css per i nostri tag.

In questo file per il div creeremo una classe class1 con gli stili:

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

Ora aggiungiamo la classe class2 con gli stili per il primo paragrafo:

.class2 {
	color: orangered;
	font-weight: bold;
}

Classe class3 con gli stili per il secondo paragrafo:

.class3 {
	font-style: italic;
	color: brown;
}

E, infine, creiamo la classe class4 per l'ultimo paragrafo:

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

Abbiamo finito con il file CSS. Resta da applicare i nostri stili CSS che abbiamo scritto per i tag. Torniamo al nostro file App.js con il componente.

La prima cosa che dobbiamo assolutamente fare - aggiungere all'inizio del file la riga di import del nostro file di stili styles.css:

import './styles.css';

Ora, per applicare nel componente le classi CSS dal file, utilizzeremo l'attributo class. Per il primo paragrafo avevamo la classe class2, applichiamola:

<p class="class2">testo</p>

In modo simile aggiungiamo le classi per gli altri tag. Come risultato otterremo il seguente codice:

<div class="class1">
	<p class="class2">testo</p>
	<p class="class3">testo</p>
	<p class="class4">testo</p>
</div>

Create un componente React che contenga un div, e nel div due pulsanti. Create un file styles.css con gli stili CSS per i vostri tag. Applicate ai tag del componente gli stili scritti.