כיצד לעצב רכיבי תגובה באמצעות מודולי 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.

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.

איך משתמשים במצב דיוקן באייפון 7

אם אתה משתמש ב-create-react-app, מודולי CSS מוגדרים מהקופסה. עם זאת, אם אתה מתכוון ליצור את היישום מאפס, תצטרך להגדיר מודולי CSS עם מהדר כמו webpack.

כדי לעקוב אחר הדרכה זו, אתה צריך:

• צומת מותקן במחשב שלך.
• הבנה בסיסית של מודולי ES6.
• בסיסי הבנה של React .

יצירת אפליקציית React

כדי שהדברים יהיו פשוטים, אתה יכול להשתמש ליצור-להגיב-אפליקציה לפיגום אפליקציית React.

הפעל את הפקודה הזו ל ליצור פרויקט React חדש שנקראים react-css-modules:

npx create-react-app react-css-modules 

זה יפיק קובץ חדש בשם react-css-modules עם כל התלות הנדרשת כדי להתחיל עם React.

איך לשחק מיינקראפט ג'אווה עם חברים

יצירת רכיב כפתור

תיצור רכיב Button ומודול CSS בשם Button.module.css בשלב זה. בתיקיית src, צור תיקיה חדשה בשם Components. בתיקייה זו צור תיקיה נוספת בשם Button. אתה תוסיף את רכיב הלחצן וסגנונותיו בתיקייה זו.

נווט אל src/Components/Button וצור את 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; 
} 

כדי להשתמש במחלקה זו ברכיב Button, ייבא אותה כסגנונות והתייחס אליה בשם המחלקה של רכיב הכפתור כך:

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> 
    ) 
} 

קוד זה הופך את רכיב ה-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 חיצוני שנקרא colors.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 - גיליונות סגנונות מדהימים מבחינה תחבירית - הוא מעבד קדם CSS המספק המון תכונות. הם כוללים תמיכה בקינון, משתנים וירושה שאינם זמינים ב-CSS. עם Sass, אתה יכול להוסיף תכונות מורכבות יותר לאפליקציה שלך.