React'ta Nesneden style Özelliğine Veri Ekleme

CSS stilleri, style özelliği kullanılarak öğelere de eklenebilir. Bu ve sonraki birkaç derste, inline stil verme yöntemlerini inceleyeceğiz.

Artık styles.css dosyasını eklemeyeceğiz, bunun yerine her etiket için stilleri içeren bir nesne şeklinde, doğrudan bileşen dosyasında yazacağımız style özelliğine ilgili değerleri ileteceğiz.

Öyleyse, önceki derste yaptığımız CSS stil olmayan bileşenimizi alalım:

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

Şimdi App.js dosyasında, return komutundan önce, class1 değişkeninde div için CSS stilleri olan bir nesne oluşturalım. Unutmayın, özellik isimleri burada camelCase notasyonunda yazılır ve özellik değerleri tırnak içine alınmalıdır:

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

Şimdi ilk paragraf için stillerle class2 nesnesini ekleyelim:

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

İkinci paragraf için stillerle class3 nesnesi:

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

Ve son olarak sonuncusu için class4:

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

Şimdi, bileşende CSS stillerini uygulamak için style özelliğini kullanacağız. İlk paragraf için class2 değişkenimiz vardı, değer olarak onu iletilim:

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

Benzer şekilde, diğer etiketler için nesnelerden stilleri ekleyelim.

Sonuç olarak, bileşenin kodu aşağıdaki gibi görünecektir:

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