Reactda style atributida CSS stillari bilan ishlash

Oldingi darslarda style atributiga CSS stillarini o'z ichiga olgan ob'ektni o'zida saqlovchi o'zgaruvchini uzatgan edik. Oraliq o'zgaruvchisiz foydalanish mumkin, balki ob'ektni atributning o'zida yozish mumkin - bu holda bizga ikkita jingalak qavs jufti kerak bo'ladi - birinchisi JSX qo'shimchasi, ikkinchisi esa ob'ekt uchun.

Shunday qilib, keling, CSS stylesiz komponentimizni olaylik:

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

Masalan, React komponentimiz Appning birinchi abzatsi uchun CSS xususiyatlarini to'g'ridan-to'g'ri yozamiz:

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  text
</p>

Qolgan teglarga ham shu tarzda stillarni qo'shamiz.

Natijada, komponent kodi quyidagicha ko'rinadi:

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        text
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        text
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        text
      </p>
    </div>
  );
}