Menyisipkan Data ke dalam Atribut style daripada Objek dalam React

Gaya CSS untuk elemen juga boleh ditambah menggunakan atribut style. Dalam ini dan beberapa pelajaran seterusnya, kita akan melihat kaedah penggayaan sebaris.

Sekarang kita tidak akan menyambungkan fail styles.css, sebaliknya kita akan menghantar nilai yang sepadan ke atribut style dalam bentuk objek dengan gaya untuk setiap tag, yang akan kita tulis terus dalam fail komponen.

Jadi, mari ambil komponen kita tanpa gaya CSS, yang kita buat dalam pelajaran lepas:

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

Mari dalam fail App.js sebelum arahan return, kita cipta objek dengan gaya CSS untuk div dalam pembolehubah class1. Ingat, nama sifat di sini ditulis dalam camelCase notasi, dan nilai sifat perlu diletakkan dalam tanda petik:

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

Sekarang tambah objek class2 dengan gaya untuk perenggan pertama:

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

Objek class3 dengan gaya untuk perenggan kedua:

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

Akhirnya, class4 untuk yang terakhir:

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

Sekarang, untuk menggunakan kelas CSS dalam komponen, gunakan atribut style. Untuk perenggan pertama kita ada pembolehubah class2, hantarkannya sebagai nilai:

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

Dengan cara yang sama, tambah gaya daripada objek untuk tag yang lain.

Hasilnya, kod komponen akan kelihatan seperti berikut:

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