Maglumatlaryň style atributynda React-de bir obýektdän goýulmagy

CSS stillary elementlere şeýle hem style atributy arkaly goşup bolýar. Bu we birnäçe indiki sapakda biz inline stillendirme usullaryny gözden geçireris.

Indi biz styles.css faýlyny birikdirmän, her bir tege degişli bahalary style atributyna her bir teg üçin stillary bar obýekt görnüşinde komponent faýlynda göni ýazarys.

Şeýlelik bilen, öňki sapakda eden CSS stillary ýok komponentymyzy alyň:

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

Geliň, App.js faýlynda return buýrugyndan öň div üçin CSS stillary bar obýekti class1 üýtgeýjisinde döretäliň. Ýatda saklaň, bu ýerde häsiýetleriň adlary camelCase notasiýada ýazylyar, häsiýetleriň bahalaryny bolsa ýazyjyň içine almaly:

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

Indi birinji abzas üçin stillar bilen class2 obýektini goşalyň:

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

Ikinji abzas üçin stillar bilen class3 obýekti:

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

We, ahyrsoňy class4 iň soňky üçin:

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

Indi, komponentde CSS klasslaryny ulanyp başlamak üçin, style atributyny ulanarys. Birinji abzas üçin bizde class2 üýtgeýjisi bardy, ony baha hökmünde bereliň:

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

Şuňa meňzeş şekilde galan teglere obýektlerden stillary goşuň.

Netijede, komponentiň kody aşakdaky ýaly bolar:

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}>tekst</p>
      <p style={class3}>tekst</p>
      <p style={class4}>tekst</p>
    </div>
  );
}