Un approccio semplice, ma con alcune limitazioni, per aggiungere stili consiste nell'utilizzare gli stili inline, in modo simile a come si applicano gli stili agli elementi HTML tramite l'attributo style. In React, la differenza principale è che il valore di questo attributo è un oggetto, non una stringa. Analizziamo i dettagli.

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

Il componente App nell'esempio sopra include un elemento h1 con stili inline definiti tramite l'attributo style. Ecco alcuni punti chiave da ricordare sugli stili inline:

• I nomi delle proprietà composti da due o più parole devono seguire la notazione camel case (camelCase). Ad esempio, invece di utilizzare la proprietà CSS font-weight, bisogna usare fontWeight;
• Quando si assegnano valori alle proprietà CSS, generalmente si utilizzano stringhe, tranne per le proprietà che richiedono numeri semplici. Per questo motivo la proprietà fontWeight utilizza un numero (700) come valore, mentre la proprietà fontSize utilizza una stringa (32px).

Stili Inline sotto forma di Oggetto Separato

Per mantenere il codice JSX pulito e focalizzato, è possibile definire gli stili inline come un oggetto JavaScript separato e poi assegnare tale oggetto all'attributo style. Questo approccio migliora la manutenibilità e la leggibilità dei componenti.

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

In questo esempio viene introdotto l'oggetto appStyles, che rappresenta gli stessi stili utilizzati in precedenza ma ora come oggetto separato. Questa separazione delle responsabilità migliora la chiarezza del codice del componente.