Bekerja dengan Gaya CSS dalam Atribut style di React

Dalam pelajaran sebelumnya, ke dalam atribut style kita meneruskan variabel yang berisi objek dengan gaya CSS. Anda tidak perlu menggunakan variabel perantara, tetapi dapat menuliskan objek langsung di dalam atribut - dalam hal ini kita membutuhkan dua pasang kurung kurawal - yang pertama untuk penyisipan JSX, dan yang kedua - untuk objek.

Jadi, mari kita ambil komponen kita tanpa gaya CSS:

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

Sebagai contoh, mari kita tuliskan langsung properti CSS untuk paragraf pertama dari komponen React kita App:

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  text
</p>

Dengan cara yang sama, tambahkan gaya untuk tag lainnya.

Hasilnya, kode komponen akan terlihat seperti berikut:

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        text
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        text
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        text
      </p>
    </div>
  );
}