การใช้ CSS แบบโกลบอลสำหรับการจัดสไตล์ใน React

สมมติว่าเรามีคอมโพเนนต์ React App ซึ่งมี div อยู่ข้างใน และภายใน div มีสามย่อหน้า:

function App() {
	return (
		<div>
			<p>ข้อความ</p>
			<p>ข้อความ</p>
			<p>ข้อความ</p>
		</div>
	);
}

มาดูการจัดสไตล์คอมโพเนนต์นี้กัน สำหรับ สิ่งนี้ ในโฟลเดอร์เดียวกัน src กับ คอมโพเนนต์ของเรา เราจะสร้างไฟล์ CSS ปกติ ที่มีสไตล์ styles.css สำหรับแท็ก ของเรา

ในไฟล์นี้สำหรับ div เราจะสร้างคลาส class1 พร้อมสไตล์:

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

ตอนนี้เพิ่มคลาส class2 พร้อม สไตล์สำหรับย่อหน้าแรก:

.class2 {
	color: orangered;
	font-weight: bold;
}

คลาส class3 พร้อม สไตล์สำหรับย่อหน้าที่สอง:

.class3 {
	font-style: italic;
	color: brown;
}

และสุดท้าย สร้างคลาส class4 สำหรับ ย่อหน้าสุดท้าย:

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

เราเสร็จสิ้นกับไฟล์ CSS แล้ว สิ่งที่เหลือ คือการใช้สไตล์ CSS ของเรา ซึ่ง เราได้เขียนไว้สำหรับแท็ก กลับไปที่ ไฟล์ App.js ของเราพร้อมกับคอมโพเนนต์

สิ่งแรกที่เราต้องทำอย่างแน่นอน - คือเพิ่มบรรทัดนำเข้าไฟล์สไตล์ของเรา styles.css ที่ด้านบนของไฟล์:

import './styles.css';

ตอนนี้ เพื่อนำคลาส CSS จากไฟล์มาใช้ในคอมโพเนนต์ ให้ใช้แอตทริบิวต์ class สำหรับย่อหน้าแรก ของเรามีคลาส class2, นำมาใช้:

<p class="class2">ข้อความ</p>

ในทำนองเดียวกัน เพิ่มคลาสสำหรับ แท็กที่เหลือ เป็นผลให้เราได้ โค้ดต่อไปนี้:

<div class="class1">
	<p class="class2">ข้อความ</p>
	<p class="class3">ข้อความ</p>
	<p class="class4">ข้อความ</p>
</div>

สร้างคอมโพเนนต์ React ที่จะ มี div และใน div จะมีสอง ปุ่ม สร้างไฟล์ styles.css ที่มีสไตล์ CSS สำหรับแท็กของคุณ นำ สไตล์ที่เขียนไว้ไปใช้กับแท็กของคอมโพเนนต์