Gestione dello stile (CSS) in React

Tornando alla nostra applicazione:

// File: src/App.jsx

import "./App.css";

export default function App() {
  const message = "Hello React!";

  return (
    <div className="App">
      <p>{message}</p>
    </div>
  );
}

Nota: abbiamo spostato export default insieme alla dichiarazione della funzione App. Perché? Non c’è una reale motivazione alla base, è una questione di preferenza nella scrittura del codice.

/* File: src/App.css  */

.App p {
  background-color: #ddd;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  max-width: 45em;
  padding: 1em;
  width: 90vw;
}

Immaginiamo di voler mantenere una parte dello style legata a tutti i paragrafi di App, ma isolarne un’altra e legarla solo allo stile del paragrafo che abbiamo inserito in App.jsx.

Così come per il linguaggio HTML, anche in React abbiamo l’attributo style, con cui possiamo assegnare una tantum parti di stile a specifici elementi (nonostante, ricordiamolo, non sia considerata una best practice). A differenza di HTML – in cui style si aspetta una stringa – in React abbiamo un oggetto. E, come ormai d’abitudine con React, tutte le proprietà sono in formato camelCase:

/* File: src/App.css  */

.App p {
  margin-left: auto;
  margin-right: auto;
  max-width: 45em;
  width: 90vw;
}
// File: src/App.jsx

import "./App.css";

export default function App() {
  const message = "Hello React!";

  return (
    <div className="App">
      <p
        style={{
          backgroundColor: "#ddd",
          borderRadius: "8px",
          padding: "1em",
        }}
      >
        {message}
      </p>
    </div>
  );
}

Notiamo due particolarità:

1. Dopo style c’è una doppia coppia di parentesi graffe. Quella esterna indica che stiamo passando da codice HTML a JavaScript; la seconda indica che il valore dell’attributo style è un oggetto. Per capire meglio cosa sta succedendo, possiamo isolare style in una costante e passare quella all’attributo:

   // File: src/App.jsx
   
   export default function App() {
     const message = "Hello React!";
   
     const style = {
       backgroundColor: "#ddd",
       borderRadius: "8px",
       padding: "1em",
     };
   
     return (
       <div className="App">
         <p style={style}>{message}</p>
       </div>
     );
   }

   Nota: abbiamo chiamato la costante style perché è buona norma dare nomi uguali a cose diverse che rappresentano le stesse informazioni, per collegarle concettualmente tra loro. Tuttavia, avremmo potuto chiamare la costante chewingGum invece di style e avrebbe funzionato comunque (ma, ci raccomandiamo, non farlo!)

2. Le proprietà sono state convertite in camelCase: background-color è diventata backgroundColor e border-radius è diventata borderRadius.

Questo è uno dei pochi casi particolari in cui passiamo valori che non sono stringhe agli elementi HTML. Più avanti, quando cominceremo a costruire i nostri elementi personalizzati, scopriremo che è assolutamente normale passare di tutto e di più ai valori degli attributi.

CSS-in-JS

Quando è nata la programmazione web, il codice che definisce la struttura delle pagine (il linguaggio di markup, tipicamente HTML), quello che ne definisce l’aspetto visivo (stile, quindi tipicamente il linguaggio CSS) e quello che ne definisce la logica di funzionamento (spesse volte il linguaggio JavaScript) erano raccolti tutti insieme nello stesso file.

Con il passare del tempo, la comunità dei programmatori web ha separato il codice rispetto alla sua funzione, dando vita ai file .html, .css e .js separati e collegati tra loro.

L’avvento dei framework e delle librerie per la programmazione front-end come React ha segnato un terzo passaggio in cui, da una parte, abbiamo un’inversione di rotta, con i tre “tipi di codice” che tornano a essere raccolti negli stessi file, dall’altra abbiamo una nuova suddivisione, questa volta per “componenti”.

React ha fatto un passo in questa direzione per cui i componenti, come abbiamo visto, raccolgono l’equivalente delle parti HTML e JavaScript relative allo stesso “argomento” (per esempio un bottone, un menù, un form) lasciando da parte il codice CSS.

La comunità ha, però, messo insieme pacchetti e librerie per chi vuole integrare anche la parte di CSS nei file JSX, sotto un grande cappello con il nome di CSS-in-JS. Ci sono più di 50 librerie online che permettono questa cosa, molte delle quali sono state scritte specificamente per React.

Non affronteremo questo argomento all’interno di questa guida, ma se sei interessato, ti invitiamo a esplorare l’argomento. Basta cercare “CSS-in-JS” su Google.