Verileri React'ta Ayrı Bir Dosyadan style Özniteliğine Yerleştirme

Stil nesnelerini, bir önceki dersteki gibi bileşen dosyasının içine yazmak zorunda değiliz, stil nesnelerimizle ayrı bir dosya oluşturup onları istediğimiz bileşene aktarabiliriz.

Şimdi, CSS stilimiz olmayan bileşenimizi alalım:

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

src klasöründe ayrı bir styles.js dosyası oluşturalım ve içine stil nesnelerimizi yazalım:

styles.jsconst 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',
};

styles.js dosyasının altına nesnelerimizi tek bir styles nesnesi olarak aktarmayı unutmayalım:

styles.jsexport const styles = {
  class1: class1,
  class2: class2,
  class3: class3,
  class4: class4
};

Şimdi styles nesnesini bileşenimize aktaralım:

App.jsimport { styles } from "./styles";       

Artık genel styles nesnesinden ihtiyacımız olan CSS stil nesnesini etiketlerimize uygulayabiliriz. İlk paragrafa class2 nesnesinden stilleri uygulayalım:

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

Benzer şekilde, diğer etiketlere de nesnelerden stilleri ekleyelim.

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

App.jsfunction App() {
  return (
    <div style={styles.class1}>
      <p style={styles.class2}>text</p>
      <p style={styles.class3}>text</p>
      <p style={styles.class4}>text</p>
    </div>
  );
}