เริ่มต้นการเรียนรู้การจัดสไตล์ด้วย CSS modules ใน React

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

CSS modules ในแนวทางนี้ คือ ไฟล์ CSS ที่คอมไพล์แยกต่างหาก ซึ่งชื่อคลาสและชื่ออนิเมชัน อยู่ภายในขอบเขต (scope) ท้องถิ่น ทำให้สามารถหลีกเลี่ยงการชนกันของชื่อคลาส จากคอมโพเนนต์ต่าง ๆ ได้

เริ่มต้นด้วยการสร้างและเรียกใช้งาน แอปพลิเคชัน React ง่ายๆ ของเรา buttons โดยสร้างโฟลเดอร์เปล่า test เข้าไปในโฟลเดอร์นั้น และในเทอร์มินัล พิมพ์คำสั่งต่อไปนี้:

terminalnpx create-react-app buttons
cd buttons
npm start

หากคุณใช้ React เวอร์ชันใหม่ ซึ่ง รองรับ Create React App v2 ขึ้นไป ก็ไม่จำเป็นต้องตั้งค่าเพิ่มเติมใดๆ เพราะในกรณีนี้ CSS modules จะ ได้รับการรองรับโดยอัตโนมัติ สำหรับการตรวจสอบ ดูที่ไฟล์ package.json หาก dependency react-scripts เป็นเวอร์ชัน 2.x.x ขึ้นไป ก็แสดงว่าทุกอย่างเรียบร้อย มิฉะนั้นให้อัปเดต React ของคุณ

แอปพลิเคชันของเราสำหรับการจัดสไตล์ด้วยวิธี CSS modules จะมีปุ่มสามปุ่ม

เราจะตั้งชื่อไฟล์ CSS โดยยึดตาม ข้อตกลงดังต่อไปนี้: [name].module.css

ตอนนี้มาสร้างโฟลเดอร์ components ใน src และเพิ่มไฟล์ Buttons.module.css ที่ประกอบด้วย 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;
}

นอกจากนี้ในโฟลเดอร์ components ให้สร้าง ไฟล์ React คอมโพเนนต์เปล่า Buttons.js โดยตอนนี้ยังไม่ต้องแตะต้องไฟล์ที่สร้างขึ้นอัตโนมัติ App.js เราจะจัดการมันในภายหลัง!

ใน Buttons.js ต้องทำการ import ไฟล์ CSS styles เข้ามา และนำสไตล์เหล่านี้ ไปใช้กับแต่ละปุ่มโดยใช้แอตทริบิวต์ class:

Buttons.jsimport styles from "./Buttons.module.css";

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

อย่างไรก็ตาม ไม่จำเป็นต้องใช้คำว่า styles สำหรับชื่อของ object ที่ import เข้ามา คุณสามารถตั้งชื่อตามที่สะดวกก็ได้

ในบทเรียนถัดไป เราจะทำแอปพลิเคชันของเราให้เสร็จสมบูรณ์