วิธีจัดรูปแบบส่วนประกอบ React โดยใช้โมดูล CSS

โมดูล CSS ให้วิธีการกำหนดขอบเขตชื่อคลาส CSS ในเครื่อง คุณไม่ต้องกังวลกับการแทนที่สไตล์เมื่อคุณใช้ชื่อคลาสเดียวกัน

ค้นหาว่าโมดูล CSS ทำงานอย่างไร เหตุใดคุณจึงควรใช้ และวิธีนำไปใช้ในโครงการ React

---

---

โมดูล CSS คืออะไร?

ดิ เอกสารโมดูล CSS อธิบายโมดูล CSS เป็นไฟล์ CSS ที่มีชื่อคลาสถูกกำหนดขอบเขตในเครื่องโดยค่าเริ่มต้น ซึ่งหมายความว่าคุณสามารถระบุตัวแปร CSS ที่มีชื่อเดียวกันในไฟล์ CSS ต่างๆ ได้

คุณเขียนคลาสโมดูล CSS เหมือนกับคลาสปกติ จากนั้นคอมไพเลอร์จะสร้างชื่อคลาสที่ไม่ซ้ำกันก่อนที่จะส่ง CSS ไปยังเบราว์เซอร์

ตัวอย่างเช่น พิจารณาคลาส .btn ต่อไปนี้ในไฟล์ชื่อ styles.modules.css:

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
} 

ในการใช้ไฟล์นี้ คุณต้องนำเข้าไฟล์ลงในไฟล์ JavaScript

ไม่ได้เตรียมซิมความสนใจ mm#2

import styles from "./styles.module.js" 

ตอนนี้ เมื่อต้องการอ้างอิงคลาส .btn และทำให้พร้อมใช้งานในองค์ประกอบ คุณจะใช้คลาสดังที่แสดงด้านล่าง:

---

---

class="styles.btn" 

กระบวนการสร้างจะแทนที่คลาส CSS ด้วยชื่อเฉพาะของรูปแบบเช่น _styles__btn_118346908.

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

---

---

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

โมดูล CSS ยังอนุญาตให้คุณรวมหลายคลาสผ่าน แต่ง คำสำคัญ. ตัวอย่างเช่น พิจารณาคลาส .btn ด้านบนนี้ คุณสามารถ 'ขยาย' ชั้นเรียนนั้นในชั้นเรียนอื่นโดยใช้การเขียน

สำหรับปุ่มส่ง คุณอาจมี:

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
} 

ซึ่งรวมคลาส .btn และ .submit คุณยังสามารถเขียนสไตล์จากโมดูล CSS อื่นได้ดังนี้:

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
} 

โปรดทราบว่าคุณต้องเขียนกฎการเขียนก่อนกฎอื่นๆ

วิธีใช้โมดูล CSS ใน React

วิธีที่คุณใช้โมดูล CSS ใน React ขึ้นอยู่กับว่าคุณสร้างแอปพลิเคชัน React อย่างไร

หากคุณใช้ create-react-app โมดูล CSS จะได้รับการตั้งค่าทันที อย่างไรก็ตาม หากคุณกำลังจะสร้างแอปพลิเคชันตั้งแต่เริ่มต้น คุณจะต้องกำหนดค่าโมดูล CSS ด้วยคอมไพเลอร์ เช่น webpack

ในการปฏิบัติตามบทช่วยสอนนี้ คุณควรมี:

• โหนดที่ติดตั้งบนเครื่องของคุณ
• ความเข้าใจพื้นฐานของโมดูล ES6
• พื้นฐาน ความเข้าใจ React .

การสร้าง React Application

เพื่อให้ง่ายขึ้น คุณสามารถใช้ create-react-app เพื่อนั่งร้านแอป React

วิธีล้างแคชบนโทรศัพท์ Android

เรียกใช้คำสั่งนี้ไปที่ สร้างโครงการ React ใหม่ เรียกว่า react-css-modules:

npx create-react-app react-css-modules 

สิ่งนี้จะสร้างไฟล์ใหม่ที่เรียกว่า react-css-modules พร้อมการอ้างอิงทั้งหมดที่จำเป็นในการเริ่มต้นใช้งาน React

การสร้างส่วนประกอบปุ่ม

คุณจะสร้างองค์ประกอบปุ่มและโมดูล CSS ที่เรียกว่า Button.module.css ในขั้นตอนนี้ ในโฟลเดอร์ src ให้สร้างโฟลเดอร์ใหม่ชื่อ Components ในโฟลเดอร์นั้น ให้สร้างโฟลเดอร์อื่นที่เรียกว่าปุ่ม คุณจะเพิ่มองค์ประกอบปุ่มและสไตล์ของมันในโฟลเดอร์นี้

นำทางไปยัง src/ส่วนประกอบ/ปุ่ม และสร้าง Button.js

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
} 

จากนั้นสร้างไฟล์ใหม่ชื่อ Button.module.css และเพิ่มสิ่งต่อไปนี้

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 

หากต้องการใช้คลาสนี้ในองค์ประกอบปุ่ม ให้นำเข้าเป็นสไตล์และอ้างอิงในชื่อคลาสขององค์ประกอบปุ่มดังนี้:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
} 

นี่เป็นตัวอย่างง่ายๆ ที่แสดงวิธีการใช้คลาสเดียว คุณอาจต้องการแชร์สไตล์ข้ามส่วนประกอบต่างๆ หรือแม้แต่รวมคลาส สำหรับสิ่งนี้ คุณสามารถใช้คีย์เวิร์ด composes ตามที่กล่าวไว้ก่อนหน้านี้ในบทความนี้

การใช้องค์ประกอบ

ขั้นแรก แก้ไขส่วนประกอบปุ่มด้วยรหัสต่อไปนี้

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
} 

รหัสนี้ทำให้องค์ประกอบปุ่มมีไดนามิกมากขึ้นโดยยอมรับค่าประเภทเป็นพร็อพ ประเภทนี้จะกำหนดชื่อคลาสที่ใช้กับองค์ประกอบปุ่ม ดังนั้นหากปุ่มเป็นปุ่มส่ง ชื่อคลาสจะเป็น 'ส่ง' หากเป็น 'ข้อผิดพลาด' ชื่อคลาสจะเป็น 'ข้อผิดพลาด' เป็นต้น

หากต้องการใช้คีย์เวิร์ด composes แทนการเขียนสไตล์ทั้งหมดสำหรับแต่ละปุ่มตั้งแต่เริ่มต้น ให้เพิ่มรายการต่อไปนี้ใน Button.module.css

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
} 

ในตัวอย่างนี้ คลาสหลักและคลาสรองใช้คลาส btn เมื่อทำเช่นนี้ คุณจะลดจำนวนโค้ดที่ต้องเขียนลง

คุณสามารถดำเนินการนี้ให้ดียิ่งขึ้นด้วยโมดูล CSS ภายนอกที่เรียกว่า สี.module.css ซึ่งประกอบด้วยสีที่ใช้ในแอปพลิเคชัน คุณสามารถใช้โมดูลนี้ในโมดูลอื่นได้ ตัวอย่างเช่น สร้างไฟล์ colors.module.css ในรูทของโฟลเดอร์ Components ด้วยรหัสต่อไปนี้:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
} 

ตอนนี้ในไฟล์ Button/Button.module.css ให้แก้ไขคลาสหลักและคลาสรองเพื่อใช้คลาสข้างต้นดังนี้:

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
} 

Sass ด้วยโมดูล CSS

คุณสามารถใช้โมดูล CSS เพื่อปรับปรุงโมดูลาร์ของโค้ดเบสของคุณได้ ตัวอย่างเช่น คุณสามารถสร้างคลาส CSS อย่างง่ายสำหรับองค์ประกอบปุ่มและนำคลาส CSS กลับมาใช้ใหม่ผ่านองค์ประกอบ

เพื่อเพิ่มพลังให้กับการใช้โมดูล CSS ของคุณ ให้ใช้ Sass Sass—Syntactically Awesome Style ชีต—เป็นตัวประมวลผลล่วงหน้า CSS ที่มีคุณสมบัติมากมาย รวมถึงการสนับสนุนการซ้อน ตัวแปร และการสืบทอดที่ไม่มีใน CSS ด้วย Sass คุณสามารถเพิ่มคุณสมบัติที่ซับซ้อนมากขึ้นให้กับแอปพลิเคชันของคุณได้