Cara Menggunakan Atribut Style di React

Katakanlah Anda saat ini memanfaatkan potensi penarik sepenuhnya, dan mungkin Anda juga menggunakan elemen penarik dan hanya menyalin dan menempelkan komponen yang telah dibuat sebelumnya. Saya juga sering melakukannya, tetapi ada saat-saat di mana kita tidak bisa hanya menekan CTRL+C dan CTRL+V.

Meet style atribut, Anda akan sering menemukan ini di tailwind khususnya, yang pada dasarnya seperti pengaturan tambahan yang diperlukan untuk komponen Anda selain dari gaya inline pada className.

Biasanya gaya digunakan untuk menambahkan warna latar, gambar latar, dll. Anda dapat menemukan lebih banyak di dokumentasi penarik angin resmi.https://tailwindcss.com/docs/background-attachment

Ini adalah tampilan normalnya.

Sekarang, jika kita hanya menyalin dan menempelkan kodenya, itu akan menimbulkan kesalahan seperti ini.

Ini membutuhkan penyesuaian tambahan untuk gaya, yang secara mengejutkan juga dijelaskan dalam dokumen reaksi tetapi untuk beberapa alasan mungkin melewatkannya seperti saya.https://reactjs.org/docs/dom-elements.html#style

Jadi TLDR, kita tidak bisa begitu saja menggunakan hypen like background-color, kita perlu mengubahnya menjadi camelCased menjadi backgroundColor.

background-color ke BackgroundColor,

background-position ke backgroundPosition

background-image ke backgroundImage

dan tidak hanya itu, kita juga perlu menghapus tanda kutip yang merangkum semua gaya, menggantinya dengan kurung kurawal ganda, dan memasukkan nilai ke dalam tanda kutip, seperti ini.

Itu dia! Kita tidak perlu melakukan hal lain. Sekarang kode akan bekerja dengan sempurna. Seperti inilah tampilan proyek saya sekarang, semuanya hanya dengan menyalin dan menempelkan kode dari elemen penarik angin. (saya sangat merekomendasikannya,https://tailwind-elements.com/)

Selamat bersenang-senang! Terima kasih sudah membaca!