Un modo semplice per applicare gli stili in React è utilizzare gli stili inline, in modo simile a come si aggiungono gli stili agli elementi HTML tramite l'attributo style.

La differenza principale è che in React, il valore dell'attributo style è un oggetto JavaScript, non una stringa CSS.

Ecco un esempio di applicazione degli stili inline direttamente all'interno di JSX:

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

In questo esempio, l'elemento h1 riceve gli stili tramite l'attributo style, che contiene un oggetto JavaScript.

Regole importanti per gli stili inline

Quando si utilizzano gli stili inline in React, tenere presenti le seguenti regole:

• I nomi delle proprietà CSS composti da due o più parole devono utilizzare la notazione camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• I valori sono solitamente scritti come stringhe: "32px", "red", "rebeccapurple";
• Alcune proprietà possono accettare direttamente numeri: fontWeight: 700.

Queste regole esistono perché gli stili inline sono scritti in JavaScript, non in semplice CSS.

Stili inline come oggetto separato

Per mantenere il JSX più ordinato e leggibile, gli stili inline possono essere memorizzati in un oggetto JavaScript separato e poi passati all'attributo style.

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

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

Quando utilizzare gli stili inline

Gli stili inline sono più adatti per:

• Componenti di piccole dimensioni;
• Stili dinamici;
• Modifiche visive rapide.

Non sono ideali per layout estesi o stili complessi, motivo per cui spesso si preferisce il CSS esterno.