Datu ievietošana style atribūtā no objekta React

CSS stilus elementiem var pievienot arī ar style atribūta style palīdzību. Šajā un dažās nākamajās nodarbībās mēs apskatīsim inlaino stilošanu metodes.

Šoreiz mēs nepievienosim failu styles.css, bet nodosim atbilstošās vērtības atribūtā style kā objektu ar stiliem katram tagam, kurus mēs rakstīsim tieši komponenta failā.

Tātad, ņemsim mūsu komponentu bez CSS stiliem, ko mēs izveidojām iepriekšējā nodarbībā:

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

Izveidosim failā App.js pirms komandas return objektu ar CSS stiliem div mainīgajā class1. Atcerieties, ka īpašību nosaukumi šeit tiek rakstīti camelCase notācijā, un īpašību vērtības ir jāieliek pēdiņās:

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

Tagad pievienosim objektu class2 ar stiliem pirmajam rindkopai:

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

Objektu class3 ar stiliem otrajai rindkopai:

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

Un visbeidzot class4 pēdējai rindkopai:

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

Tagad, lai komponentā piemērotu CSS klases, izmantosim atribūtu style. Pirmajai rindkopai mums bija mainīgais class2, padodam to kā vērtību:

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

Līdzīgā veidā pievienosim stilus no objektiem pārējiem tagiem.

Rezultātā komponenta kods izskatīsies šādi:

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