คำสั่ง composes สำหรับคลาสใน CSS modules ใน React

ในบทเรียนนี้ เราจะพิจารณาเทคนิคที่มีประโยชน์มาก สำหรับการนำสไตล์ CSS ของคลาสหนึ่งมาใช้ซ้ำ ในอีกคลาสหนึ่งใน CSS modules

กลับไปที่แอปพลิเคชัน buttons ซึ่ง เราได้ทำไว้ในบทเรียนที่ผ่านมา ลองดูไฟล์ 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;
}

สมมติว่า เราต้องการให้ปุ่มทุกปุ่มมี การตัดมุมโค้ง (border-radius) และขนาดฟอนต์ ที่เหมือนกัน แน่นอนว่าเราสามารถเพิ่ม คุณสมบัติที่เหมือนกันในแต่ละคลาสได้ แต่ต้องขอบคุณคำสั่ง composes จาก CSS modules เราจะทำอีกวิธีหนึ่ง

เริ่มต้นด้วยการสร้างคลาสเพิ่มอีกหนึ่งคลาส เช่น common-btn ซึ่งเราจะใส่ คุณสมบัติที่เหมือนกันเหล่านี้ไว้ในนั้น และเพื่อนำ คุณสมบัติจากคลาสนี้ไปใช้ในคลาสอื่น จำเป็นต้อง ใช้ syntax นี้ในคลาสเหล่านั้น:

selector {
	composes: ชื่อคลาส;
}

ตอนนี้โค้ดของ Buttons.module.css จะมีลักษณะดังนี้:

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

นำแอปพลิเคชัน React inputs ของคุณ ซึ่งคุณทำไว้ในโจทย์ของบทเรียนที่ผ่านมา มาเพิ่มสไตล์ CSS ที่เหมือนกันสองสามอย่าง พร้อมค่าที่เหมือนกันให้กับอินพุตทั้งหมด สร้างคลาสเพิ่มเติมขึ้นมา เพื่อเขียนสไตล์เหล่านี้ไว้ในนั้น จากนั้น ใช้ composes เพื่อกระจาย สไตล์เหล่านั้นไปยังคลาสอื่นๆทั้งหมดสำหรับอินพุต