Inserarea datelor în atributul style din variabile în React

În lecția precedentă am scris obiectul direct în atributul style. De asemenea, putem folosi inserarea datelor în acest obiect din variabile.

Să luăm componenta noastră React fără stiluri CSS:

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

Acum vom crea variabile și le vom atribui valori ale proprietăților CSS. Să începem pe rând cu stilurile pentru div.

În fișierul componentei înainte de comanda return vom crea variabila wd1 și îi vom atribui valoarea '200px':

App.jsconst wd1 = '200px';

În mod similar vom crea variabile pentru toate valorile proprietăților div-ului nostru:

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

Acum să adăugăm variabile pentru primul paragraf:

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

Pentru al doilea paragraf:

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

Și, în final, pentru ultimul. Aici vor fi necesare doar două, nu trei variabile. Nu are sens să repetăm, deoarece valoarea bold o avem deja pentru primul paragraf:

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

Iar acum vom substitui variabilele cu valorile stilurilor. Să facem asta pentru primul paragraf. Să inserăm variabilele co1 și fw1 în locul valorilor în obiect:

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

În mod similar vom proceda cu restul tagurilor.

În rezultat, codul componentei noastre va arăta astfel:

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>
  );
}