Perintah composes untuk Kelas dalam CSS modules di React

Dalam pelajaran ini, kita akan membahas teknik yang sangat berguna untuk menggunakan kembali gaya CSS dari satu kelas di kelas lain dalam CSS modules.

Mari kita kembali ke aplikasi buttons, yang kita buat di pelajaran sebelumnya. Mari kita lihat file Buttons.module.css:

.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;
}

Anggaplah, kita ingin semua tombol memiliki pembulatan yang sama dan ukuran font yang sama. Tentu saja, kita bisa menambahkan properti yang sama di setiap kelas. Namun berkat perintah composes dari CSS modules, kita akan melakukan dengan cara yang berbeda.

Pertama-tama, mari buat kelas lain, misalnya common-btn, di mana kita akan menempatkan properti-properti yang sama ini. Dan untuk menerapkan properti dari kelas ini di kelas lain, kita perlu menggunakan sintaks berikut di dalamnya:

selector {
	composes: nama-kelas;
}

Sekarang kode Buttons.module.css kita akan terlihat seperti ini:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

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

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

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

Ambil aplikasi React Anda inputs, yang Anda buat di tugas-tugas untuk pelajaran sebelumnya. Tambahkan beberapa gaya CSS dengan nilai yang sama untuk semua input. Buat kelas tambahan, di mana gaya-gaya ini akan ditulis. Dengan bantuan composes, sebarkan gaya-gaya tersebut ke semua kelas lain untuk input.