Kaedah Menggayakan Komponen React

Terdapat banyak kaedah berbeza untuk menggayakan komponen React. Di sini kita akan melihat beberapa kaedah asas.

Pendekatan standard yang boleh kita gunakan, seperti dalam penggayaan halaman web biasa - ialah menggunakan CSS global. Di sini kita mencipta satu fail CSS luaran bersama dengan gaya. Dengan pendekatan ini, semua nama kelas berada dalam skop global, yang boleh menyebabkan konflik antara mereka. Juga boleh dibuat banyak fail CSS kecil. Pendekatan ini kurang berkesan untuk mencipta aplikasi berskala besar.

Pendekatan seterusnya - penggayaan sebaris, menggunakannya, kita boleh menambah gaya CSS sebaris, serupa dengan cara yang dilakukan dalam HTML biasa. Dalam kes ini, kita akan bekerja dengan atribut style, dengan memberikan kepadanya sifat CSS yang diperlukan. Penggunaan penggayaan sedemikian dianggap amalan tidak baik dan disyorkan hanya untuk menambah gaya yang dikira secara dinamik semasa pemaparan. Kaedah ini bagus untuk prototaip pantas antara muka komponen individu.

Beberapa kaedah seterusnya yang akan kita lihat - adalah moden, semakin popular, berkesan kaedah penggayaan. Inilah kaedah yang disyorkan untuk penggayaan aplikasi React berskala besar.

Yang pertama - penggunaan perpustakaan Styled Components, yang menggunakan untuk penggayaan rentetan templat. Kaedah ini membolehkan kita menulis CSS biasa dalam kod JS, menggunakan semua fungsinya.

Kaedah kedua - penggunaan modul CSS. Dalam kes ini, modul CSS - ialah fail CSS di mana secara lalai semua nama kelas dan animasi berada dalam skop tempatan, iaitu hanya boleh diakses di dalam komponen yang menggunakannya.

Dalam dua kaedah terakhir ini, kita tidak perlu takut konflik antara nama kelas, kerana ia unik - konsep skop tempatan digunakan. Juga, dengan penggunaannya keperluan untuk metodologi BEM dihapuskan.

Dalam pelajaran seterusnya, kita akan membincangkan semua kaedah yang dinyatakan di sini dengan lebih terperinci.