Vkládání dat do atributu style z objektu v Reactu

CSS styly prvkům lze také přidat pomocí atributu style. V této a několika následujících lekcích probereme metody inline stylování.

Nyně nebudeme připojovat soubor styles.css, ale předáme příslušné hodnoty do atributu style ve formě objektu se styly pro každý tag, které budeme psát přímo v souboru komponenty.

Vezměme tedy naši komponentu bez CSS stylů, kterou jsme vytvořili v minulé lekci:

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

V souboru App.js před příkazem return vytvořme objekt s CSS styly pro div v proměnné class1. Pamatujte, že názvy vlastností se zde píší v camelCase notaci a hodnoty vlastností je třeba uvést do uvozovek:

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

Nyně přidejme objekt class2 se styly pro první odstavec:

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

Objekt class3 se styly pro druhý odstavec:

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

A nakonec class4 pro poslední:

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

Nyně, abychom použili v komponentě CSS třídy, využijeme atribut style. Pro první odstavec jsme měli proměnnou class2, předáme ji jako hodnotu:

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

Podobným způsobem přidáme styly z objektů pro zbývající tagy.

Výsledný kód komponenty bude vypadat následovně:

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