כיצד לעצב רכיבי תגובה באמצעות מודולי CSS

מודולי CSS מספקים דרך לתחום מקומי של שמות מחלקות CSS. אתה לא צריך לדאוג לעקוף סגנונות כשאתה משתמש באותו שם מחלקה.

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

מה הם מודולי CSS?

ה מסמכי מודולי CSS תאר מודול CSS כקובץ CSS ששמות המחלקות שלו הם בהיקף מקומי כברירת מחדל. זה אומר שאתה יכול להתייחס למשתני CSS עם אותו שם בקבצי CSS שונים.

אתה כותב שיעורי מודול CSS בדיוק כמו שיעורים רגילים. לאחר מכן המהדר מייצר שמות מחלקות ייחודיים לפני שליחת ה-CSS לדפדפן.

לדוגמה, שקול את מחלקת ה-.btn הבאה בקובץ בשם styles.modules.css:

.btn {
 רוחב: 90 פיקסלים;
 גובה: 40 פיקסלים;
 ריפוד: 10px 20px;
}

כדי להשתמש בקובץ זה, עליך לייבא אותו לקובץ JavaScript.

יְבוּא סגנונות מ "./styles.module.js"

כעת, כדי להתייחס למחלקה .btn ולהפוך אותה לזמינה באלמנט, תשתמש במחלקה כפי שמוצג להלן:

מעמד="styles.btn"

תהליך הבנייה יחליף את מחלקת ה-CSS בשם ייחודי של הפורמט כמו _styles__btn_118346908.

הייחודיות של שמות המחלקות פירושה שגם אם תשתמש באותו שם מחלקה עבור רכיבים שונים, הם לא יתנגשו. אתה יכול להבטיח עצמאות גדולה יותר של קוד מכיוון שאתה יכול לאחסן סגנונות CSS של רכיב בקובץ בודד, ספציפי לאותו רכיב.

זה מפשט את ניפוי הבאגים, במיוחד אם אתה עובד עם גיליונות סגנונות מרובים. תצטרך רק לאתר את מודול ה-CSS עבור רכיב מסוים.

מודולי CSS גם מאפשרים לך לשלב מספר מחלקות דרך מלחין מילת מפתח. לדוגמה, שקול את מחלקת ה-.btn הבאה למעלה. אתה יכול "להרחיב" את השיעור הזה במחלקות אחרות באמצעות חיבורים.

עבור כפתור שלח, אתה יכול לקבל:

.btn {
/* סגנונות */
}
.שלח {
 מלחין: btn;
 צבע רקע: ירוק;
 צֶבַע:#FFFFFF
}

זה משלב את המחלקות .btn ו-.submit. אתה יכול גם לחבר סגנונות ממודול CSS אחר כמו זה:

.שלח {
 מלחין: ראשוני מ "./colors.css"
 צבע רקע: ירוק;
}

שימו לב שעליכם לכתוב את כלל החיבור לפני כללים אחרים.

כיצד להשתמש במודולי CSS ב-React

אופן השימוש במודולי CSS ב-React תלוי באופן שבו אתה יוצר את אפליקציית React.

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

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

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

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

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

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

npx לִיצוֹר-react-app react-css-modules

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

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

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

נווט אל src/Components/Button וצור את Button.js.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהלַחְצָן() {
לַחֲזוֹר (
<לַחְצָן>שלח</button>
 )
}

לאחר מכן, צור קובץ חדש בשם Button.module.css והוסף את הדברים הבאים.

.btn {
 רוחב: 90 פיקסלים;
 גובה: 40 פיקסלים;
 ריפוד: 10px 20px;
 border-radius: 4px;
 גבול: אין;
}

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

יְבוּא סגנונות מ "./Button.module.css"
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהלַחְצָן() {
לַחֲזוֹר (
<button className={styles.btn}>שלח</button>
 )
}

זוהי דוגמה פשוטה שמראה כיצד להשתמש במחלקה אחת. ייתכן שתרצה לשתף סגנונות על פני רכיבים שונים או אפילו לשלב שיעורים. לשם כך, אתה יכול להשתמש במילת המפתח composes כפי שהוזכרה קודם לכן במאמר זה.

שימוש בקומפוזיציה

ראשית, שנה את רכיב הלחצן עם הקוד הבא.

יְבוּא סגנונות מ "./Button.module.css"
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהלַחְצָן({type="primary", label="Button"}) {
לַחֲזוֹר (
<button className={סגנונות[סוג]}>{תווית}</button>
 )
}

קוד זה הופך את רכיב ה-Button לדינמי יותר על ידי קבלת ערך טיפוס כאביזר. סוג זה יקבע את שם המחלקה המוחל על רכיב הכפתור. אז אם הכפתור הוא כפתור שליחה, שם הכיתה יהיה "שלח". אם זה "שגיאה", שם המחלקה יהיה "שגיאה", וכן הלאה.

כדי להשתמש במילת המפתח composes במקום לכתוב את כל הסגנונות עבור כל כפתור מאפס, הוסף את הדברים הבאים ל-Button.module.css.

.btn {
 רוחב: 90 פיקסלים;
 גובה: 40 פיקסלים;
 ריפוד: 10px 20px;
 border-radius: 4px;
 גבול: אין;
}
.יְסוֹדִי {
 מלחין: btn;
 צֶבַע: #FFFFFF;
 צבע רקע: #6E41E2;
}
.מִשׁנִי {
 מלחין: btn;
 צֶבַע: #6E41E2;
 צבע רקע: #FFFFFF;
}

בדוגמה זו, המחלקה הראשית והמחלקה המשנית משתמשות במחלקה btn. על ידי כך, אתה מפחית את כמות הקוד שאתה צריך לכתוב.

אתה יכול לקחת את זה אפילו רחוק יותר עם מודול CSS חיצוני שנקרא colors.module.css, המכיל את הצבעים המשמשים באפליקציה. לאחר מכן תוכל להשתמש במודול זה במודולים אחרים. לדוגמה, צור את הקובץ colors.module.css בשורש התיקיה Components עם הקוד הבא:

.primaryBg {
 צבע רקע: #6E41E2
}
.secondaryBg {
 צבע רקע: #FFFFFF
}
.צבע יסוד {
 צֶבַע: #FFFFFF
}
.secondaryColor {
 צֶבַע: #6E41E2
}

כעת בקובץ Button/Button.module.css, שנה את המחלקות הראשיות והמשניות כדי להשתמש במחלקות לעיל כך:

.יְסוֹדִי {
 מלחין: btn;
 מלחין: צבע ראשוני מ "../colors.module.css";
 מלחין: primaryBg from "../colors.module.css";
}
.מִשׁנִי {
 מלחין: btn;
 מלחין: משניצבע מ "../colors.module.css";
 מלחין: משניBg מ "../colors.module.css";
}

Sass עם מודולי CSS

אתה יכול להשתמש במודולי CSS כדי לשפר את המודולריות של בסיס הקוד שלך. כדוגמה, אתה יכול ליצור מחלקת CSS פשוטה עבור רכיב כפתור ולעשות שימוש חוזר במחלקות CSS באמצעות קומפוזיציה.

כדי להגביר את השימוש שלך במודולי CSS, השתמש ב-Sass. Sass - גיליונות סגנונות מדהימים תחביריים - הוא מעבד קדם CSS המספק המון תכונות. הם כוללים תמיכה בקינון, משתנים וירושה שאינם זמינים ב-CSS. עם Sass, אתה יכול להוסיף תכונות מורכבות יותר לאפליקציה שלך.