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

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

กลับไปที่แอปพลิเคชัน buttons ซึ่ง เราได้ทำไว้ในบทเรียนที่ผ่านมา ลองดูไฟล์ Buttons.module.css:

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 นี้ในคลาสเหล่านั้น:

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

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

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