كيفية تصميم مكونات التفاعل باستخدام وحدات CSS

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

اكتشف كيف تعمل وحدات CSS ولماذا يجب عليك استخدامها وكيفية تنفيذها في مشروع React.

ما هي وحدات CSS؟

ال مستندات وحدات CSS وصف وحدة CSS كملف CSS يتم تحديد نطاق أسماء فئاته محليًا بشكل افتراضي. هذا يعني أنه يمكنك معالجة متغيرات CSS بنفس الاسم في ملفات CSS مختلفة.

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

على سبيل المثال ، ضع في اعتبارك فئة .btn التالية في ملف يسمى styles.modules.css:

.btn {
 العرض: 90 بكسل ؛
 الارتفاع: 40 بكسل ؛
 الحشو: 10 بكسل 20 بكسل ؛
}

لاستخدام هذا الملف ، يجب عليك استيراده إلى ملف 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 باستخدام مترجم مثل حزمة الويب.

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

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

إنشاء تطبيق React

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

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

npx خلقرد فعل التطبيق رد فعل- css-modules

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

إنشاء مكون زر

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

انتقل إلى src / المكونات / زر وأنشئ Button.js.

يصدّرإفتراضيوظيفةزر() {
إرجاع (
<زر>يُقدِّم</button>
 )
}

بعد ذلك ، قم بإنشاء ملف جديد يسمى Button.module.css وأضف ما يلي.

.btn {
 العرض: 90 بكسل ؛
 الارتفاع: 40 بكسل ؛
 الحشو: 10 بكسل 20 بكسل ؛
 نصف قطر الحدود: 4 بكسل ؛
 الحدود: لا شيء ؛
}

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

يستورد الأنماط من "./Button.module.css"
يصدّرإفتراضيوظيفةزر() {
إرجاع (
<زر className = {styles.btn}>يُقدِّم</button>
 )
}

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

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

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

يستورد الأنماط من "./Button.module.css"
يصدّرإفتراضيوظيفةزر({type = "basic"، label = "Button"}) {
إرجاع (
<زر className = {أنماط [نوع]}>{ضع الكلمة المناسبة}</button>
 )
}

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

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

.btn {
 العرض: 90 بكسل ؛
 الارتفاع: 40 بكسل ؛
 الحشو: 10 بكسل 20 بكسل ؛
 نصف قطر الحدود: 4 بكسل ؛
 الحدود: لا شيء ؛
}
.الأولية {
 يؤلف: btn.
 اللون: #FFFFFF ؛
 لون الخلفية: # 6E41E2 ؛
}
.ثانوي {
 يؤلف: btn.
 اللون: # 6E41E2 ؛
 لون الخلفية: #FFFFFF ؛
}

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

يمكنك أن تأخذ هذا إلى أبعد من ذلك باستخدام وحدة CSS خارجية تسمى colours.module.cssالتي تحتوي على الألوان المستخدمة في التطبيق. يمكنك بعد ذلك استخدام هذه الوحدة في وحدات أخرى. على سبيل المثال ، قم بإنشاء ملف colors.module.css في جذر مجلد المكونات باستخدام الكود التالي:

.primaryBg {
 لون الخلفية: # 6E41E2
}
.secondaryBg {
 لون الخلفية: #FFFFFF
}
.لون أصلي {
 اللون: #FFFFFF
}
.اللون الثانوي {
 اللون: # 6E41E2
}

الآن في ملف Button / Button.module.css ، قم بتعديل الفئات الأساسية والثانوية لاستخدام الفئات المذكورة أعلاه مثل هذا:

.الأولية {
 يؤلف: btn.
 يؤلف: الابتدائي اللون من "../colors.module.css";
 يؤلف: الابتدائي من "../colors.module.css";
}
.ثانوي {
 يؤلف: btn.
 يؤلف: ثانوياللون من "../colors.module.css";
 يؤلف: الثانوية من "../colors.module.css";
}

ساس مع وحدات CSS

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

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