เรียนรู้อาร์เอสเอสโมดูล React ต่อ

มาต่อกันที่แอปพลิเคชัน buttons ของเรา ตอนนี้เราจะมาจัดการกับคอมโพเนนต์หลัก App ซึ่งถูกสร้างไว้แล้วในโฟลเดอร์ src ตั้งแต่แรก ในนั้นเราจะมี div สองตัว หัวเรื่อง และปุ่ม

มาเปลี่ยนชื่อไฟล์ App.css เป็น App.module.css ตามข้อตกลง ล้างข้อมูลในไฟล์ และสร้าง คลาสที่มีสไตล์ CSS สำหรับแท็กต่างๆ ขึ้นมาบางคลาส:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

และตอนนี้เรามาล้างเนื้อหาในไฟล์ App.js กัน จากนั้นนำเข้า React คอมโพเนนต์ Buttons และสไตล์จาก App.module.css มาเขียนแท็กของเรา และนำสไตล์ไปใช้กับพวกมัน รวมทั้งวาง React คอมโพเนนต์ Buttons ไว้:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

เราใช้คำว่า classes สำหรับชื่ออ็อบเจ็กต์ที่เก็บสไตล์ซึ่ง เรานำเข้าจาก App.module.css เช่นเดียว กับในกรณีก่อนหน้า คุณสามารถตั้งชื่ออ็อบเจ็กต์นี้ ตามที่สะดวกก็ได้

เหลืออีกสองสามขั้นตอนเล็กน้อย เปลี่ยนชื่อ ไฟล์ index.css ตามข้อตกลงเป็น index.module.css และในไฟล์ index.js อย่าลืมเปลี่ยนบรรทัดการนำเข้า:

import "./index.css";

เป็นบรรทัดนี้:

import "./index.module.css";

ตอนนี้เราสามารถดูผลลัพธ์การทำงาน ของแอปพลิเคชันของเราในเบราว์เซอร์ได้

หากคุณเปิดโค้ด HTML ที่ถูกสร้างขึ้นมา ในหน้าต่าง Developer Tools ของเบราว์เซอร์ คุณ จะเห็นว่าแต่ละคอมโพเนนต์ มีคลาสเฉพาะที่ไม่ซ้ำกันถูกสร้างขึ้นมา ดังนั้น เราไม่จำเป็นต้องกังวลอีกต่อไป เกี่ยวกับความขัดแย้งระหว่างคลาสของแต่ละ คอมโพเนนต์

สิ่งสำคัญอีกอย่างคือ CSS modules ไม่ได้ห้าม การนำเข้าไฟล์ CSS ภายนอกแบบธรรมดา

ตามทฤษฎีจากบทเรียน จงล้างข้อมูลใน React คอมโพเนนต์ App ของแอปพลิเคชัน inputs ที่คุณสร้างไว้ใน โจทย์ของบทเรียนที่แล้ว และวาง Inputs ที่คุณสร้างไว้ ลงใน div ที่จัดสไตล์ไว้บางอย่าง เพิ่ม หัวเรื่องที่จัดสไตล์ไว้ใน App ทั้งหมดนี้ ใส่ลงใน div อีกอันหนึ่ง สไตล์ สำหรับแท็กของ React คอมโพเนนต์ App ให้เขียนใน App.modules.css

นำทุกอย่างมารวมกัน ให้ เชื่อมต่อไฟล์ที่เหลือให้ถูกต้อง และ รันแอปพลิเคชันของคุณ inputs