Halo, Habr! Saya mempersembahkan untuk Anda terjemahan dari artikel
“4 Cara untuk Memberi Gaya Komponen” .
Sampai saat ini, banyak cara untuk mendesain komponen Bereaksi telah dikembangkan. Dari perpustakaan hingga menggunakan file CSS tradisional. Pilihannya cukup luas dan kemungkinan besar akan sesuai dengan preferensi Anda. Berikut adalah empat cara mendesain komponen Bereaksi.
Css sebaris
Karena JSX dikonversi ke elemen HTML, ini memungkinkan Anda untuk menggunakan atribut style. Gaya dapat diterapkan ke elemen hanya dengan memberikannya objek dengan properti. Akan terlihat seperti ini:
Namun, metode ini sangat terbatas. Itu tidak dapat menggunakan pseudo-selektor, seperti: hover, serta permintaan media. Tetapi ini tidak berarti bahwa itu tidak boleh digunakan. Ini dapat digunakan ketika hanya ada 2 atau 3 properti yang tidak memerlukan penyeleksi semu atau pertanyaan media, dan / atau dalam situasi di mana penggunaan kondisi dalam gaya diperlukan.
Perpustakaan Styling
Saya suka hanya belajar perpustakaan atau kerangka kerja baru. Metode ini adalah favorit saya untuk menata komponen Bereaksi. Ada banyak pustaka gaya yang memungkinkan Anda tidak hanya membuat stylize komponen, tetapi juga menyediakan "fitur super" tambahan, seperti yang saya sebut, bersama dengan semua fitur CSS yang membuat segalanya lebih mudah.
Contoh penggunaan mungkin terlihat seperti ini:
Di atas adalah contoh menggunakan perpustakaan komponen-gaya.
Wrapper disebut komponen gaya. Gaya didefinisikan dalam konstanta Wrapper, yang hanya membuat komponen dengan gaya ini. Cukup tentukan jenis elemen apa yang Anda butuhkan, misalnya: div, header atau img, dan gunakan seolah-olah itu adalah komponen Bereaksi. Bukan elemen HTML, hanya komponen, yang membuat kode lebih bersih dan lebih mudah dibaca.
Ini hanya preferensi saya. Mungkin Anda suka menggunakan div, atau melihat elemen HTML asli. Tidak masalah! Khan Academy mengembangkan pustaka Aphrodite, yang menggunakan elemen HTML tetapi melampirkan gaya ke komponen menggunakan atribut className.
Artikel saya di AphroditePerpustakaan ini juga memiliki banyak fitur tambahan yang memungkinkan Anda melakukan hal-hal yang luar biasa. Ada banyak perpustakaan, jadi Anda hanya perlu mencoba dan melihat mana yang akan tinggal bersama Anda.
Berikut adalah dua yang paling populer saat ini:
https://www.styled-components.com/https://glamorous.rocks/Gaya eksternal
Anda dapat menulis gaya dalam file CSS eksternal dan mengimpornya ke komponen jika perlu. Ini mungkin metode pertama yang Anda pelajari ketika Anda mulai belajar Bereaksi. Namun, saat menambahkan elemen tambahan, ada masalah dengan penamaannya. Semua gaya berada dalam lingkup global. Misalnya, Anda memiliki dua item dengan nama yang sama dibuat oleh Anda atau rekan setim Anda, dalam hal ini Anda mungkin menghadapi masalah ini.
Modul CSS
Modul CSS sangat mirip dengan menulis CSS di file eksternal. Satu-satunya perbedaan adalah bahwa gaya dienkapsulasi, berbeda dengan penggunaan tradisional file CSS eksternal. Ini berarti bahwa gaya tidak akan saling bertentangan atau menimpa satu sama lain. Anda menggunakan metode yang sama yang digunakan dalam CSS tradisional. Ini juga memungkinkan penggunaan semua metodologi yang baik, seperti BEM. Anda dapat membaca lebih lanjut di sini:
https://github.com/css-modules/css-modulesAgar Anda tidak memutuskan untuk menggunakan: CSS tradisional, modul CSS, CSS sebaris, pustaka untuk penataan, atau kombinasi dari metode ini, menurut pendapat saya, semuanya tergantung pada preferensi Anda dan preferensi tim Anda.
Terima kasih sudah membaca. Menemukan kesalahan? Jangan ragu untuk bercerita tentang dia. Semoga harimu menyenangkan!