Вметнување на податоци во атрибутот style од објект во React

CSS стилови на елементите може да се додадат и со помош на атрибутот style. Во ова и во неколку следни лекции ќе ги разгледаме начините за инлајна стилизација.

Сега нема да го поврзуваме фајлот styles.css, туку ќе ги пренесеме соодветните вредности во атрибутот style во вид на објект со стилови за секој таг, кои ќе ги пишуваме директно во фајлот на компонентата.

Значи, да ја земеме нашата компонента без CSS стилови, која ја правевме во претходната лекција:

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

Да пред командата return во фајлот App.js создадеме објект со 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',
}

И, конечно class4 за последниот:

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

Сега, за да ги примениме во компонентата CSS класите, ќе го искористиме атрибутот style. За првиот пасус ја имавме променливата class2, да ја пренесеме како вредност:

App.js<p style={class2}>text</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}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}