كيفية إضافة ورقة أنماط وحدات CSS إلى مكون React الخاص بك في 4 خطوات بسيطة

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

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

إضافة CSS نمطي إلى مكون بسيط

  1. ميزة React هي أن CSS Modules "مفعّلة" للملفات التي تنتهي .module.cssبالامتداد. قم بإنشاء ملف CSS باسم ملف محدد بالتنسيق التالي:
Link.module.css

2. استيراد نمط إلى المكون الخاص بك:

import styles from ‘../styling/components/Link.module.css’

3. يمكن أن تتبع الأنماط الموجودة في ملف CSS اصطلاح التسمية المفضل لديك ، على سبيل المثال:

.bold { font-weight: bold;}

4. يتم تطبيق النمط على عنصر HTML كما يلي:

className={styles.bold}

وهذا كل شيء!

رصيد الصورة: Adrian Swancar على Unsplash