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

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

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

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

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

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

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

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

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

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

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

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

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

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

App.jsimport './styles.css';

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

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

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

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