Utilizzo degli Stili Inline in React

Un modo semplice per applicare gli stili in React è utilizzare gli stili inline, in modo simile a come gli stili vengono aggiunti 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 essere scritti in camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• I valori sono solitamente scritti come stringhe: "32px", "red", "rebeccapurple";
• Alcune proprietà possono accettare numeri direttamente: 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ù pulito e facile da leggere, 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 usare 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.