Reactте объекттен маалыматты style атрибутуна киргизүү

CSS стилдерин элементтерге style атрибуту аркылуу дагы кошсо болот. Бул жана кийинки бир нече сабактарда биз инлайн стилдештирүү ыкмаларын карап чыгабыз.

Эми биз styles.css файлын туташтырбай, тиешелүү маанилерди ар бир тег үчүн стилдер объектиси түрүндө style атрибутуна өткөрөбүз, аларды компоненттин файлына түз эле жазабыз.

Ошентип, биз өткөн сабакта жасаган, CSS стилдери жок компонентибизди алалы:

App.jsfunction App() {
  return (
    <div>
      <p>текст</p>
      <p>текст</p>
      <p>текст</p>
    </div>
  );
}

Келгиле, App.js файлында return буйругунан мурун class1 өзгөрмөсүндө див үчүн CSS стилдери менен объект түзөлү. Эсиңизде болсун, бул жердеги касиеттердин аталыштары 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',
}

Жана акыры, акыркысы үчүн class4:

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

Эми, компонентте CSS класстарын колдонуу үчүн, style атрибутун пайдаланалы. Биринчи абзац үчүн class2 өзгөрмөсү бар, аны маани катары берели:

App.js<p style={class2}>текст</p>

Окшош жол менен калган тегдер үчүн объекттерден стилдерди кошолу.

Натыйжада, компоненттин коду төмөнкүдөй көрүнөт:

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}>текст</p>
      <p style={class3}>текст</p>
      <p style={class4}>текст</p>
    </div>
  );
}