Perintah composes untuk Kelas dalam CSS modules di React

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

Mari kita kembali kepada aplikasi buttons yang kita buat dalam pelajaran lepas. Lihat fail 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;
}

Katakanlah, kita mahu semua butang mempunyai lengkungan yang sama dan saiz fon. Sudah tentu, kita boleh menambah sifat yang sama dalam setiap kelas. Tetapi terima kasih kepada perintah composes dari CSS modules, kita akan bertindak dengan cara yang berbeza.

Pertama, mari kita buat satu kelas lagi, contohnya common-btn, dan letakkan sifat-sifat yang sama ini di dalamnya. Dan untuk menggunakan sifat dari kelas ini dalam kelas lain, kita perlu menggunakan sintaks dalam kelas-kelas tersebut:

pemilih {
	composes: nama kelas;
}

Sekarang kod Buttons.module.css kita akan kelihatan 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 dalam tugas untuk pelajaran lepas. Tambahkan untuk semua input beberapa gaya CSS yang sama dengan nilai yang sama. Buat kelas tambahan, di mana gaya-gaya ini akan ditulis. Dengan menggunakan composes, sebarkan mereka ke semua kelas lain untuk input.