Sebbene gli stili inline siano utili per una stilizzazione minima o dinamica, la maggior parte delle applicazioni reali si affida a file CSS esterni. Questo approccio mantiene gli stili separati dalla logica dei componenti e ne facilita la gestione man mano che il progetto cresce.

React supporta i CSS esterni nativamente. È possibile scrivere CSS standard e applicarlo ai componenti utilizzando i nomi delle classi, proprio come nello sviluppo web tradizionale.

Creazione di un file CSS esterno

Per prima cosa, crea un file CSS e definisci i tuoi stili:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Questo file CSS contiene una semplice classe che può essere riutilizzata tra i componenti.

Importazione del CSS in un componente

Per utilizzare gli stili, importa il file CSS all'interno del file del tuo componente:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

In React, l'attributo class viene scritto come className perché class è una parola riservata in JavaScript.

Come funziona il CSS esterno in React

I file CSS vengono applicati globalmente per impostazione predefinita. Qualsiasi componente può utilizzare una classe definita in un file CSS importato. Gli stili si comportano allo stesso modo che in HTML e CSS standard. Questo rende il CSS esterno familiare e semplice da utilizzare, soprattutto per gli sviluppatori provenienti dallo sviluppo web tradizionale.

Quando utilizzare il CSS esterno

Il CSS esterno è una buona scelta quando:

• Gli stili sono condivisi tra più componenti;
• I layout diventano più complessi;
• Si desidera una chiara separazione tra struttura e stile.

Per progetti di grandi dimensioni, il CSS esterno spesso porta a un codice più pulito e più facile da mantenere.