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

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

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

App.module.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 ไว้:

App.jsimport 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 อย่าลืมเปลี่ยนบรรทัดการนำเข้า:

index.jsimport "./index.css";

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

index.jsimport "./index.module.css";

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

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

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