Memulai Belajar Styling dengan CSS modules di React

Dalam pelajaran ini dan selanjutnya, kita akan meninjau pendekatan modern dan efektif lainnya untuk styling komponen React - penggunaan CSS modules.

CSS modules dalam pendekatan ini adalah file CSS terkompilasi terpisah, di mana nama kelas dan animasi berada dalam cakupan lokal, yang memungkinkan untuk menghindari konflik antara nama kelas dari komponen yang berbeda.

Untuk memulainya, mari buat dan jalankan aplikasi React sederhana kita buttons. Untuk itu, buat folder kosong test, masuk ke dalamnya dan di terminal tulis perintah berikut:

npx create-react-app buttons
cd buttons
npm start

Jika Anda memiliki versi React yang baru, yaitu versi yang mendukung Create React App v2 dan lebih tinggi, maka tidak perlu melakukan pengaturan tambahan, karena dalam hal ini CSS modules akan didukung secara otomatis. Untuk memeriksanya lihatlah ke dalam package.json, jika dependensi react-scripts versi 2.x.x dan lebih tinggi, maka semuanya baik. Jika tidak, perbarui React Anda.

Aplikasi kita untuk styling dengan cara CSS modules akan berisi tiga tombol.

File CSS akan kita beri nama, mengikuti kesepakatan, sebagai berikut: [name].module.css.

Sekarang mari buat folder components di src, dan tambahkan ke dalamnya file Buttons.module.css dengan gaya CSS untuk tombol-tombol kita:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Juga di folder components, buatlah file kosong komponen React Buttons.js, sementara itu jangan sentuh file yang dihasilkan App.js, kita akan mengurusnya nanti!

Di Buttons.js wajib impor file dengan gaya CSS, dan juga terapkan gaya-gaya ini ke setiap tombol dengan menggunakan atribut class:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Ngomong-ngomong, tidak harus menggunakan kata styles untuk nama objek yang diimpor dengan gaya, Anda bisa menamainya sesuai keinginan Anda.

Dalam pelajaran berikutnya kita akan menyelesaikan aplikasi kita.

Ikuti teori untuk pelajaran ini dan hasilkan aplikasi React inputs.

Gunakan pendekatan CSS modules, yang diberikan dalam pelajaran. Buat di src aplikasi inputs file Inputs.js untuk komponen React Inputs, yang akan berisi tiga input. Tulis beberapa gaya di Inputs.modules.css untuk input-input. Impor file ini ke Inputs.js dan terapkan gaya-gayanya.