Metode Styling Komponen React

Ada banyak metode berbeda untuk styling komponen React. Di sini kita akan membahas beberapa metode dasar.

Pendekatan standar yang bisa kita terapkan, seperti styling halaman web biasa - adalah penggunaan CSS Global. Di sini kita membuat satu file CSS eksternal bersama dengan style. Dengan pendekatan ini, semua nama kelas berada dalam ruang lingkup global, yang dapat menyebabkan konflik di antara mereka. Juga bisa membuat banyak file CSS kecil. Pendekatan ini kurang efektif dalam pembuatan aplikasi berskala besar.

Pendekatan berikutnya - styling inline, menggunakannya, kita dapat menambahkan style CSS secara inline, seperti yang dilakukan dalam HTML biasa. Dalam hal ini kita akan bekerja dengan atribut style, memberikannya properti CSS yang diperlukan. Penerapan styling seperti itu dianggap sebagai praktik yang buruk dan direkomendasikan hanya untuk menambahkan style yang dihitung secara dinamis selama rendering. Cara ini bagus untuk prototiping cepat antarmuka dari komponen individual.

Beberapa cara berikutnya yang akan kita bahas - adalah metode styling modern, yang semakin populer, dan efektif. Ini adalah metode yang disarankan untuk digunakan untuk styling aplikasi React berskala besar.

Yang pertama - penerapan library Styled Components, yang menggunakan template literal untuk styling. Metode ini memungkinkan kita menulis CSS biasa dalam kode JS, menggunakan seluruh fungsionalitasnya.

Cara kedua - penerapan CSS Modules. Dalam hal ini, CSS module adalah file CSS di mana secara default semua nama kelas dan animasi berada dalam ruang lingkup lokal, yaitu hanya dapat diakses di dalam komponen yang menggunakannya.

Dalam dua cara terakhir ini kita tidak perlu takut konflik antara nama kelas, karena mereka unik - menggunakan konsep ruang lingkup lokal. Juga dengan penggunaannya kebutuhan akan metodologi BEM menghilang.

Dalam pelajaran berikutnya, kita akan membahas semua cara yang disebutkan di sini secara lebih detail.