คลาส composes สำหรับไฟล์ใน CSS modules ใน React

คำสั่ง composes สามารถนำไปใช้เพื่อ นำสไตล์จากไฟล์หนึ่งมาใช้ซ้ำ ในอีกไฟล์ได้

กลับไปที่แอปพลิเคชัน buttons ที่เราทำในบทเรียนก่อนหน้านี้ สมมติว่าเราต้องการเพิ่มเงา สไตล์ของเคอร์เซอร์ และตัวอักษรหนาเหมือนกันให้กับปุ่มทั้งหมด ให้สไตล์เหล่านี้อยู่ใน ไฟล์ App.module.css มาเปิดไฟล์นี้และเพิ่ม คลาสใหม่ beauty พร้อมกับ สไตล์เหล่านี้ที่ส่วนต้นไฟล์:

.beauty { 
	box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
	font-weight: bold;
	cursor: pointer;
}

มาใช้มันสำหรับตกแต่งปุ่มกัน เพื่อทำสิ่งนี้ เปิด Buttons.module.css และ ทำการเปลี่ยนแปลงในคลาส common-btn เราจะเพิ่มบรรทัดด้วยคำสั่ง composes ซึ่งระบุชื่อคลาส beauty ที่เราต้องการใช้และไฟล์ App.module.css ซึ่งเป็นที่อยู่ ของคลาสนี้:

.common-btn {
	composes: beauty from "../App.module.css"; 
	font-size: 16px;
	border-radius: 3px;
}

นำโค้ดแอปพลิเคชันของคุณจาก งานในบทเรียนที่แล้วมาทำ เงาให้กับอินพุตของคุณ โดยใช้วิธีที่นำเสนอใน บทเรียนนี้