Styling React dengan Styled Components
Pada artikel kali ini, saya akan membahas mengenai salah satu library untuk mempercantik tampilan aplikasi React yang juga saya gunakan dalam pengembangan proyek PPL SekolahKu, yakni styled components. Yuk mulai!
Apa itu Styled Components?
Styled components adalah salah satu CSS-in-JS library yang dapat digunakan di React. Jika dengan menggunakan cara biasa, kita harus memetakan suatu component dengan style secara manual, misal dengan membuat baris kode CSS dan meng-assign-nya ke suatu component melalui classname. Dengan styled components, sesuai dengan namanya, kita dapat membuat suatu component dengan sekaligus mengatur style didalamnya, sehingga nantinya style telah melekat pada component yang kita buat.
Cara Instalasi
Seperti library React pada umumnya, untuk dapat menggunakan styled component pada project, kita hanya perlu melakukan instalasi library menggunakan npm atau yarn.
# Menggunakan npm
npm install --save styled-components# Menggunakan yarn
yarn add styled-components
Cara Penggunaan
Agar lebih mudah dipahami, saya akan mencoba membuat sebuah component button dan menunjukkan beberapa hal yang dapat kita lakukan dengan menggunakan library styled components ini.
Membuat Custom Button
Sebelum memulai pembuatan component, kita harus terlebih dahulu melakukan import styled dari styled components. Kemudian untuk membuat custom button kita dapat menggunakan styled.button yang telah disediakan oleh library, baru selanjutnya memberikan style yang diinginkan.
Dapat dilihat pada screenshot diatas, saya melakukan styling berupa pemberian width, border-radius, background-color, dan color pada component button yang saya beri nama CustomButton. Setelah selesai membuat component, kita hanya perlu memanggil component tersebut seperti halnya memanggil component biasa.
Menggunakan Satu Button untuk Berbagai Kebutuhan
Bagaimana jika kita ingin membuat button lain dengan style yang berbeda? misalnya untuk tombol cancel yang biasanya berwarna merah, apakah harus membuat component baru lagi dengan style yang berbeda? Jawabannya adalah tidak perlu, component yang dibuat menggunakan styled components dapat diberikan props sebagaimana component React pada umumnya. Melalui props tersebut, kita dapat mengkustomisasi style yang telah melekat pada component. Berikut contoh implementasinya.
Dapat dilihat dari kode diatas, terdapat conditional statement pada nilai atribut background-color, yang mana akan meng-assign nilai atribut sesuai dengan props yang diberikan pada component. Semisal salah satu component kita berikan props ‘cancel’, maka akan menghasilkan tampilan berikut ini.
Memisahkan Cancel Button dengan Custom Button
Bagaimana jika terdapat banyak atribut yang ingin diubah? saya ingin Cancel Button tersebut dapat disesuaikan besar-kecil ukurannya dan terdapat atribut style lain yang dikhususkan untuknya! Aduh banyak banget maunya :(
Tapi tenang aja, styled component juga memungkinkan kita untuk membuat component baru yang meng-extend component lain yang serupa, jadi kita hanya perlu menambahkan atribut style yang diinginkan dan belum ada pada component yang lama. Berikut contoh implementasinya.
Dapat dilihat, bahwa atribut style yang sekiranya sama tidak perlu kita tuliskan lagi di component CancelButton, kita hanya perlu menambahkan atribut style yang berbeda atau dikhususkan untuk component ini.
Catatan Untuk Melakukan Test
Sedikit catatan berdasarkan pengalaman saya ketika melakukan testing menggunakan enzyme. Component yang dibuat menggunakan styled components tidak dapat secara langsung ditemukan menggunakan method ‘find(selector)’ dari enzyme. Untuk itu, kita perlu menspesifikasikan displayname dari component tersebut dengan cara sebagai berikut.
Setelah menspesifikasikan displayname, method ‘find(selector)’ dari enzyme ini baru dapat mengenali component yang kita buat menggunakan styled components sebagai selector.
Penutup
Selain tiga hal diatas, masih banyak fitur styled components lainnya yang dapat digunakan. Selebihnya bisa eksplor dan langsung dicoba sendiri ya! Dokumentasi lengkap mengenai styled components bisa kalian akses disini.
Sekian untuk artikel kali ini, semoga bisa bermanfaat. Terima kasih!
