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:

App.jsfunction 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:

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

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

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

Classe class3 con gli stili per il secondo paragrafo:

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

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

styles.css.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:

App.jsimport './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:

App.js<p class="class2">testo</p>

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

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