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

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

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

App.module.css.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 ซึ่งเป็นที่อยู่ ของคลาสนี้:

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