L'utilizzo di un file CSS per stilizzare i componenti React deriva dalla struttura tradizionale HTML-CSS. Di seguito è riportata una guida passo-passo su come è possibile utilizzare un file CSS per stilizzare i componenti React:

1. Creare un file CSS

Per iniziare, creare un file CSS separato con estensione .css. Questo file può essere posizionato nella stessa cartella del componente oppure in una cartella dedicata esclusivamente agli stili, dove tutti i file CSS sono organizzati insieme.

Esempio:

2. Importare il file CSS

Utilizzare l'istruzione 'import' per importare i file CSS all'interno del file del componente. Inserire questa istruzione di importazione all'inizio del file del componente. All'interno delle virgolette '', specificare il percorso corretto del file.

Esempio:

// Import the CSS file
import './index.css';

Se il file CSS si trova nella cartella styles, l'istruzione di importazione avrà la seguente sintassi:

// Import the CSS file from a folder
import './styles/index.css';

Nota

Utilizzare la notazione punto e barra ./ per fare riferimento a un file all'interno della stessa directory. Per accedere a un file al di fuori della cartella corrente e navigare nella directory superiore, utilizzare due punti e una barra ../.

3. Applicare gli stili al componente

Una volta importati gli stili, il componente riconosce la presenza del CSS. Di conseguenza, è possibile utilizzare i selettori CSS e i nomi delle classi per stilizzare gli elementi. L'unica differenza è che nelle applicazioni React si utilizza l'attributo className invece dell'attributo class usato nei file HTML.

Esempio:

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Ora è possibile utilizzare le classi CSS container, title e description per stilizzare gli elementi all'interno del componente Block.

Aggiungere lo stile

A questo punto, è possibile aprire il file CSS e applicare gli stili ai nomi delle classi definiti. Ad esempio, il file index.css può contenere i seguenti stili:

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

Seguendo questi passaggi, verranno applicati agli elementi del componente React gli stili definiti nel file CSS.

Codice completo dell'app: