Reactда объектдан маълумотларни style атрибутига киритиш

CSS стилларни elementларга style атрибути орқали ҳам қўшиш мумкин. Ушбу ва keyingi bir nechta darslarda biz инлайн стиллар usullarini ko'rib chiqamiz.

Ҳозирча биз styles.css файлини уланмаймиз, balki mos қийматларни har bir teg uchun стиллар bilan объект коринишида style атрибутига ўтказамиз, уларни component файлининг ўзида ёзамиз.

Шунинг учун, CSS стилларисз ўтган дарсда биз ясаган componentимизни оламиз:

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

App.js файлида return buyругида див учун CSS стиллари билан class1 ўзгарувчисида объект ясаймиз. Эсда тутингиз, бу ерда свойствалар номлари camelCase нотациясида ёзилади, ва свойствалар қийматлари қошиқ ичага олиниши керак:

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

Энди биринчи абзац учун class2 объектини стиллар билан қўшамиз:

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

Иккинчи абзац учун class3 объектини стиллар билан:

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

Ва ниҳоят, oxirgisi учун class4:

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

Энди, component ичида CSS классларни қўллаш учун, style атрибутидан фойдаланамиз. Биринчи абзац учун бизда class2 ўзгарувчиси бор эди, уни қиймат сифатида ўтказамиз:

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

Шунинг ўхшаш тарзда қолган теглар учун объектлардан стилларни қўшамиз.

Натижада, component коди quyidagicha ko'rinadi:

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