Andmete sisestamine style atribuuti objektist Reactis

CSS stiile saab elementidele lisada ka style atribuudi abil. Selles ja mõnes järgnevas õppetükis me vaatleme inline-stiilimise meetodeid.

Nüüd me ei ühenda faili styles.css, vaid anname vastavad väärtused style atribuudi sisse objekti kujul koos stiilidega iga tagi jaoks, mida me kirjutame otse komponendi faili.

Niisiis, võtame oma komponendi ilma CSS stiilideta, mida me tegime eelmises õppetükis:

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

Loome failis App.js enne käsku return objekti CSS stiilidega divi jaoks muutujas class1. Pidage meeles, et omaduste nimetused kirjutatakse siin camelCase notatsioonis, ja omaduste väärtused tuleb võtta jutumärkidesse:

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

Nüüd lisame objekti class2 koos stiilidega esimese lõigu jaoks:

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

Objekti class3 koos stiilidega teise lõigu jaoks:

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

Ja lõpuks class4 viimase jaoks:

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

Nüüd, et rakendada komponendis CSS klasse, kasutame atribuuti style. Esimese lõigu jaoks meil oli muutuja class2, edastame selle väärtusena:

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

Samamoodi lisame stiilid objektidest ülejäänud tagidele.

Tulemusena näeb komponendi kood välja järgmine:

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