Inserimento di dati nell'attributo style da variabili in React

Nella lezione precedente abbiamo scritto l'oggetto direttamente nell' attributo style. Possiamo anche utilizzare l'inserimento di dati in questo oggetto da variabili.

Prendiamo il nostro componente React senza stili CSS:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Ora creeremo variabili e assegneremo loro i valori delle proprietà CSS. Iniziamo con ordine con gli stili per il div.

Nel file del componente, prima del comando return, creiamo la variabile wd1 e assegniamole il valore '200px':

App.jsconst wd1 = '200px';

In modo simile creiamo variabili per tutti i valori delle proprietà del nostro div:

App.jsconst wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Ora aggiungiamo le variabili per il primo paragrafo:

App.jsconst co1 = 'orangered';
const fw1 = 'bold';

Per il secondo paragrafo:

App.jsconst fs1 = 'italic';
const co2 = 'brown';

E, infine, per l'ultimo. Qui serviranno solo due, e non tre variabili. Non ha senso ripetersi, dato che il valore bold lo abbiamo già per il primo paragrafo:

App.jsconst bco1 = 'orange';
const co3 = 'white';

E ora sostituiremo le variabili con i valori degli stili. Facciamolo per il primo paragrafo. Inseriamo le variabili co1 e fw1 al posto dei valori nell'oggetto:

App.js<p style = {{ color: co1, fontWeight: fw1 }}>
  text
</p>

In modo simile procediamo con gli altri tag.

Di conseguenza, il codice del nostro componente avrà questo aspetto:

App.jsfunction App() {
  const wd1 = '200px';
  const br1 = '2px solid brown';
  const pd1 = '10px';
  const ta1 = 'center';

  const co1 = 'orangered';
  const fw1 = 'bold';

  const fs1 = 'italic';
  const co2 = 'brown';
  
  const bco1 = 'orange';
  const co3 = 'white';

  return (
    <div style = {{
      width: wd1,
      border: br1,
      padding: pd1,
      textAlign: ta1 }}>
      <p style = {{ color: co1, fontWeight: fw1 }}>
        text
      </p>
      <p style = {{ fontStyle: fs1, color: co2 }}>
        text
      </p>
      <p style = {{ 
        backgroundColor: bco1,
        fontWeight: fw1,
        color: co3 }}>
        text
      </p>
    </div>
  );
}