كيفية تصميم مكونات التفاعل باستخدام وحدات 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.

إذا كنت تستخدم تطبيق create-react-app ، فسيتم إعداد وحدات CSS خارج الصندوق. ومع ذلك ، إذا كنت ستنشئ التطبيق من البداية ، فستحتاج إلى تكوين وحدات CSS النمطية باستخدام مترجم مثل حزمة الويب.

لمتابعة هذا البرنامج التعليمي ، يجب أن يكون لديك:

• العقدة مثبتة على جهازك.
• فهم أساسي لوحدات ES6.
• أساسي فهم React .

إنشاء تطبيق React

لإبقاء الأشياء بسيطة ، يمكنك استخدامها إنشاء-رد-التطبيق لدعم تطبيق React.

قم بتشغيل هذا الأمر إلى إنشاء مشروع React جديد تسمى وحدات تفاعل css:

npx create-react-app react-css-modules 

سيُنشئ هذا ملفًا جديدًا يسمى رد فعل-css-modules مع كل التبعيات المطلوبة للبدء في React.

إنشاء مكون زر

ستقوم بإنشاء مكون Button ووحدة CSS تسمى Button.module.css في هذه الخطوة. في المجلد src ، أنشئ مجلدًا جديدًا يسمى المكونات. في هذا المجلد ، قم بإنشاء مجلد آخر يسمى Button. ستقوم بإضافة مكون الزر وأنماطه في هذا المجلد.

انتقل إلى 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; 
} 

لاستخدام هذه الفئة في مكون Button ، قم باستيرادها كأنماط وقم بالإشارة إليها في اسم فئة عنصر الزر مثل هذا:

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

هذا مثال بسيط يوضح كيفية استخدام فئة واحدة. قد ترغب في مشاركة الأنماط عبر مكونات مختلفة أو حتى دمج الفئات. لهذا ، يمكنك استخدام الكلمة الأساسية التي تم إنشاؤها كما هو مذكور سابقًا في هذه المقالة.

باستخدام التركيب

أولاً ، قم بتعديل مكون Button بالتعليمة البرمجية التالية.

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

يجعل هذا الرمز مكون الزر أكثر ديناميكية بقبول قيمة نوع كخاصية. سيحدد هذا النوع اسم الفئة المطبق على عنصر الزر. لذلك إذا كان الزر عبارة عن زر إرسال ، فسيكون اسم الفصل 'إرسال'. إذا كانت عبارة عن 'خطأ' ، فسيكون اسم الفئة 'خطأ' ، وهكذا.

لاستخدام الكلمة الأساسية المؤلفة بدلاً من كتابة جميع الأنماط لكل زر من البداية ، أضف ما يلي إلى Button.module.css.

تحسين الكمبيوتر للألعاب windows 10

.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 خارجية تسمى colours.module.css التي تحتوي على الألوان المستخدمة في التطبيق. يمكنك بعد ذلك استخدام هذه الوحدة في وحدات أخرى. على سبيل المثال ، قم بإنشاء ملف colors.module.css في جذر مجلد المكونات باستخدام الكود التالي:

.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"; 
} 

ساس مع وحدات CSS

يمكنك استخدام وحدات CSS النمطية لتحسين نمطية قاعدة التعليمات البرمجية الخاصة بك. كمثال ، يمكنك إنشاء فئة CSS بسيطة لمكون زر وإعادة استخدام فئات CSS من خلال التكوين.

لتعزيز استخدامك لوحدات CSS ، استخدم Sass. Sass - أوراق أنماط رائعة نحويًا - هي معالج CSS مسبق يوفر عددًا كبيرًا من الميزات. وهي تشمل دعم التداخل والمتغيرات والوراثة غير المتوفرة في CSS. باستخدام Sass ، يمكنك إضافة ميزات أكثر تعقيدًا إلى تطبيقك.