Menyisipkan Data ke Atribut style dari Variabel di React

Dalam pelajaran sebelumnya, kita menulis objek langsung di atribut style. Kita juga dapat menggunakan penyisipan data ke objek ini dari variabel.

Mari kita ambil komponen React kita tanpa gaya CSS:

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

Sekarang kita akan membuat variabel dan menetapkan nilai properti CSS ke dalamnya. Mari kita mulai secara berurutan dengan gaya untuk div.

Di file komponen, sebelum perintah return, buat variabel wd1 dan beri nilai '200px':

App.jsconst wd1 = '200px';

Dengan cara yang sama, buat variabel untuk semua nilai properti div kita:

App.jsconst wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Sekarang tambahkan variabel untuk paragraf pertama:

App.jsconst co1 = 'orangered';
const fw1 = 'bold';

Untuk paragraf kedua:

App.jsconst fs1 = 'italic';
const co2 = 'brown';

Dan akhirnya, untuk yang terakhir. Di sini hanya dibutuhkan dua, bukan tiga variabel. Tidak masuk akal untuk mengulang, karena nilai bold sudah kita miliki untuk paragraf pertama:

App.jsconst bco1 = 'orange';
const co3 = 'white';

Dan sekarang kita akan menggantikan variabel dengan nilai gaya. Mari lakukan untuk paragraf pertama. Sisipkan variabel co1 dan fw1 sebagai pengganti nilai dalam objek:

App.js<p style = {{ color: co1, fontWeight: fw1 }}>
  text
</p>

Lakukan hal yang sama dengan tag lainnya.

Hasilnya, kode komponen kita akan terlihat seperti ini:

App.jsfunction App() {
  const wd1 = '200px';
  const br1 = '2px solid brown';
  const pd1 = '10px';
  const ta1 = 'center';

  const co1 = 'orangered';
  const fw1 = 'bold';

  const fs1 = 'italic';
  const co2 = 'brown';
  
  const bco1 = 'orange';
  const co3 = 'white';

  return (
    <div style = {{
      width: wd1,
      border: br1,
      padding: pd1,
      textAlign: ta1 }}>
      <p style = {{ color: co1, fontWeight: fw1 }}>
        text
      </p>
      <p style = {{ fontStyle: fs1, color: co2 }}>
        text
      </p>
      <p style = {{ 
        backgroundColor: bco1,
        fontWeight: fw1,
        color: co3 }}>
        text
      </p>
    </div>
  );
}