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

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

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

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

npx 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 สำหรับปุ่มของเรา:

.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:

import 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 เข้ามา คุณสามารถตั้งชื่อตามที่สะดวกก็ได้

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

ตามทฤษฎีในบทเรียนนี้ ให้สร้าง แอปพลิเคชัน React inputs

ใช้แนวทาง CSS modules ตามที่นำเสนอ ในบทเรียน สร้างไฟล์ Inputs.js สำหรับ React คอมโพเนนต์ Inputs ใน src ของแอปพลิเคชัน inputs ซึ่งจะประกอบด้วยอินพุตสามช่อง เขียนสไตล์สองสามอย่างใน Inputs.modules.css สำหรับอินพุต import ไฟล์นี้ใน Inputs.js และ นำสไตล์ไปใช้