მონაცემების ჩასმა style ატრიბუტში ობიექტიდან React-ში

CSS სტილების ელემენტებზე დამატება ასევე შესაძლებელია style ატრიბუტის მეშვეობით. ამ და რამდენიმე მომდევნო გაკვეთილში ჩვენ განვიხილავთ ინლაინული სტილიზაციის მეთოდებს.

ახლა ჩვენ არ დავაკავშირებთ ფაილს styles.css, არამედ გადავცემთ შესაბამის მნიშვნელობებს style ატრიბუტში ობიექტის სახით, სტილებით თითოეული თეგისთვის, რომელთა ჩაწერასაც ჩვენ ვაპირებთ უშუალოდ კომპონენტის ფაილში.

მაშ, ავიღოთ ჩვენი კომპონენტი CSS სტილების გარეშე, რომელიც წინა გაკვეთილზე გავაკეთეთ:

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

მოდით ფაილში App.js ბრძანებამდე return შევქმნათ ობიექტი 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>
  );
}