Menggunakan Modul CSS di React
Kasus untuk Modul CSS dan bagaimana menerapkannya ke dalam Aplikasi React Anda
Jika Anda relatif baru mengenal CSS, Anda mungkin atau mungkin tidak mengalami masalah signifikan yang terjadi saat gaya aplikasi meluas — karena aturan CSS mengikuti cakupan global , dua atau lebih kelas dengan nama yang sama akan bertabrakan. Menangani beberapa stylesheet dan melacak konvensi penamaan dalam file CSS bisa memberatkan, dan jika Anda tidak cukup berhati-hati, Anda pasti akan menemui beberapa konflik dari nama kelas yang identik.
Modul CSS dapat mengatasi kesalahan yang mungkin muncul ini, terutama saat aplikasi Anda berkembang. Mereka pada akhirnya memungkinkan kita untuk menggunakan nama kelas yang sama dalam banyak file tanpa kesalahan pemilih dan aturan dengan menentukan nama kelas secara lokal secara default.
Modul CSS hanyalah sebuah .cssfile, di mana kelas bertindak mirip dengan variabel lokal di Javascript. Ini adalah alat yang membuat setiap kelas unik dengan menyertakan hash di namanya.
Membuat Modul CSS
Jika Anda menggunakan create-react-app, membuat Modul CSS untuk sebuah komponen relatif mudah. Ikuti konvensi penamaan umum untuk file css, tetapi masukkan modulesebelumnya .css, seperti ini:[name].module.css
Untuk melihat contohnya, berikut adalah Task.module.cssfile saya dalam aplikasi agenda sederhana:
Jika saya memiliki boxkelas lain dalam komponen berbeda yang memiliki warna berbeda, aturan tersebut tidak akan bertabrakan karena modul menerapkan cakupan lokal .
Untuk mengimpor Modul CSS ke dalam komponen yang sesuai, impor lembar gaya modul css sebagai stylesatau [name]Styles:
Di JSX, gunakan kelas CSS yang ditentukan sebagai prop className seperti:
Dari sini, Anda dapat menambahkan modul CSS lain sebanyak yang Anda inginkan, ingatlah untuk mengimpor masing-masing sebagai nama yang berbeda.
Dengan Modul CSS, Anda dapat membuat file CSS portabel yang dapat digunakan kembali dan tidak perlu lagi mengkhawatirkan benturan nama pemilih atau aturan yang memengaruhi gaya komponen lain.
Seringkali ketika dihadapkan dengan keputusan gaya untuk aplikasi React, pengembang bingung antara menggunakan Modul CSS atau pustaka CSS-in-JS ( alat untuk mengabstraksi CSS ke tingkat komponen ) seperti komponen bergaya, Emosi, atau gaya-jsx. Karena pustaka CSS-in-JS menjadi lebih banyak digunakan dan umum untuk mendeskripsikan gaya secara deklaratif, saya perhatikan bahwa banyak yang masih percaya Modul CSS adalah cara yang tepat, terutama untuk kualitas modular dan dapat digunakan kembali yang membuat pengalaman penataan lebih banyak. mulus.
Suggested posts
Menghindari Akibat Menghancurkan Stroke: Belajar dari Perjalanan Keluarga .
Pendahuluan Stroke adalah keadaan darurat medis yang dapat menyerang siapa saja kapan saja. Itu terjadi ketika aliran darah ke bagian otak terganggu, yang menyebabkan hilangnya fungsi otak secara tiba-tiba.
Lembar Gaya Kopi: Kopi sebagai Warna
Dalam infografik konyol ini, saya membayangkan bagaimana kopi dapat diekspresikan jika direpresentasikan mirip dengan warna CSS.
Mereka mengatakan pengembang hanya bisa bekerja untuk kopi. Saya rasa itu tidak benar (tapi mungkin juga tidak terlalu jauh).
Related posts
Mengapa beberapa pekerja lepas memalsukan hidup mereka
Saya baru-baru ini berada di Linkedin, jejaring sosial profesional terbesar di dunia, dan menemukan postingan dari desainer lepas yang saya ikuti yang menarik perhatian saya. Mereka semua memposting foto dari pesawat terbang, di pantai dengan laptop mereka, dari kolam renang, dan kantor dengan pemandangan menakjubkan.
Mendanai penghapusan karbon di FY24
Rincian permintaan alokasi Carbon180 di seluruh jalur
Oleh Alyson Lee, penasihat urusan pemerintah yang mengelola Proses alokasi tahunan pemerintah federal merupakan inti dari upaya kami untuk mendanai penghilangan karbon dioksida (CDR). Setiap tahun, Carbon180 mengajukan permintaan ke berbagai kantor kongres untuk membantu mengarahkan ke mana dolar tahun depan akan mengalir.
Cara Menyelamatkan Planet dan Menghasilkan Uang
Berapa kali Anda membuang botol plastik, toples kaca, kaleng aluminium, atau paket energi hijau tanpa berpikir dua kali? Berapa kali Anda berharap bisa mendapatkan sesuatu sebagai imbalan untuk mendaur ulangnya? Jika Anda seperti kebanyakan orang, jawabannya mungkin berkali-kali. Daur ulang sering dianggap merepotkan, tugas, atau tugas yang tidak membawa manfaat langsung atau nyata.