Vkladanie dát do atribútu style z objektu v React

CSS štýly elementom je možné pridávať aj pomocou atribútu style. V tejto a niekoľkých nasledujúcich lekciách preskúmame spôsoby inline štýlovania.

Teraz nebudeme pripájať súbor styles.css, ale odovzdáme príslušné hodnoty do atribútu style vo forme objektu so štýlmi pre každý tag, ktoré budeme písať priamo v súbore komponentu.

Takže, zoberme náš komponent bez CSS štýlov, ktorý sme robili v minulej lekcii:

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

V súbore App.js pred príkazom return vytvorme objekt s CSS štýlmi pre div v premennej class1. Pamätajte, že názvy vlastností sa tu píšu v camelCase notácii a hodnoty vlastností je potrebné zapísať do úvodzoviek:

App.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center'
};

Teraz pridajme objekt class2 so štýlmi pre prvý odsek:

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

Objekt class3 so štýlmi pre druhý odsek:

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

A nakoniec class4 pre posledný:

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}     

Teraz, aby sme aplikovali v komponente CSS triedy, použijeme atribút style. Pre prvý odsek sme mali premennú class2, odovzdajme ju ako hodnotu:

App.js<p style={class2}>text</p>

Podobným spôsobom pridajme štýly z objektov pre zvyšné tagy.

Výsledne bude kód komponentu vyzerať nasledovne:

App.jsfunction App() {
  const class1 = {
    width: '200px',
    border: '2px solid brown',
    padding: '10px',
    textAlign: 'center',
  };

  const class2 = {
    color: 'orangered',
    fontWeight: 'bold',
  };

  const class3 = {
    fontStyle: 'italic',
    color: 'brown',
  };

  const class4 = {
    backgroundColor: 'orange',
    fontWeight: 'bold',
    color: 'white',
  };

  return (
    <div style={class1}>
      <p style={class2}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}