Aggiungere lo stile

• 2 minuti

Quando si usa React, si crea codice HTML. Il metodo di creazione è diverso, ma il browser esegue comunque il rendering di codice HTML, CSS e JavaScript.

Si può persino aggiungere codice CSS ai componenti per applicare uno stile. Per aggiungere codice CSS a un componente, occorre farvi riferimento allo stesso modo in cui si importerebbe qualsiasi altra dipendenza JavaScript.

Aggiungere codice CSS

1. Aggiungere un nuovo file alla cartella src. Assegnargli il nome index.css.

2. Aggiungere lo stile seguente al file:

   article {
       margin-left: 10%;
       margin-right: 10%;
       font-family: Verdana, Geneva, Tahoma, sans-serif;
       font-size: 18px;
   }
   

   Se si vuole, è possibile personalizzare questo stile.

Importare il codice CSS

1. Aprire il file App.jsx.

2. All'inizio del file aggiungere la riga di codice seguente:

   import './index.css'
   

3. Tornare al browser e aggiornarlo. Il sito viene aggiornato con il nuovo stile.