Lệnh composes cho các lớp trong CSS modules trong React

Trong bài học này, chúng ta sẽ xem xét một kỹ thuật rất hữu ích để tái sử dụng CSS style của một lớp trong một lớp khác trong CSS modules.

Hãy quay lại ứng dụng buttons mà chúng ta đã làm trong các bài học trước. Hãy xem 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;
}

Giả sử, chúng ta muốn tất cả các nút đều có cùng độ bo tròn và kích thước phông chữ. Đương nhiên, có thể nhân các thuộc tính giống nhau lên trong mỗi lớp. Nhưng nhờ lệnh composes từ CSS modules, chúng ta sẽ hành động theo cách khác.

Đầu tiên, hãy tạo một lớp khác, ví dụ common-btn, để đặt những thuộc tính giống nhau này vào đó. Và để áp dụng các thuộc tính từ lớp này sang lớp khác, cần sử dụng cú pháp sau trong chúng:

bộ chọn {
	composes: tên lớp;
}

Bây giờ, code trong Buttons.module.css của chúng ta sẽ trông như thế này:

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

Hãy lấy ứng dụng React inputs của bạn, mà bạn đã làm trong các nhiệm vụ của những bài học trước. Hãy thêm cho tất cả các input một vài CSS style giống nhau với các giá trị giống nhau. Tạo một lớp bổ sung, trong đó viết các style này. Với sự trợ giúp của composes, hãy nhân rộng chúng sang tất cả các lớp khác dành cho input.