التنسيق المدمج المباشر (Inline Styles) في React باستخدام الكائنات (Objects)
| وجه المقارنة | التنسيق المباشر في HTML | التنسيق المباشر في React (JSX) |
|---|---|---|
| نوع القيمة الممررة للسمة | سلسلة نصية عادية string محاطة بعلامات تنصيص مزدوجة | كائن جافا سكريبت Object محاط بأقواس مجعدة مزدوجة |
| صياغة أسماء الخصائص | تفصل بينها شرطة مائلة كالمعتاد مثل background-color | تُكتب حتماً بأسلوب السنام CamelCase مثل backgroundColor |
| وحدات القياس الرقمية (مثل px) | يجب كتابة وحدة القياس نصياً وبشكل صريح مثل 20px | يمكن كتابة الرقم مجرداً كعدد وتتولى ريأكت إضافة px تلقائياً |
في تطوير الويب التقليدي، كان يُنظر إلى التنسيق المباشر (Inline Styles) كخيار غير مستحب لعدم مرونته. ولكن في React، وبسبب فلسفة دمج المظهر مع المنطق البرمجي، أصبح التنسيق المباشر أداة قوية جداً وديناميكية، شريطة أن تفهم قواعدها الهندسية الفريدة.
في JSX، لا يتم تمرير التنسيق المباشر كنص عادي، بل يتم تمريره كـ كائن جافا سكريبت (JavaScript Object).
عندما تبدأ في كتابة تنسيق مباشر داخل عنصر ريأكت، ستجد نفسك مجبراً على كتابة أقواس مكررة هكذا: style={{ }}. يعتقد الكثير من المبتدئين أن هذا وسم خاص أو صياغة جديدة، ولكن تفكيكها الهندسي بسيط للغاية:
بما أننا نكتب كائناً برمجياً، يجب أن نلتزم بقواعد كائنات جافا سكريبت:
دعنا نرى كيف نكتب التنسيق المباشر، سواء بكتابته مضمناً أو بحفظه في متغير خارجي لتنظيم كود المكون:
| 1 | <div style={{ width: `${completionPercentage}%`, backgroundColor: 'green', height: '10px' }} /> |
ℹ️ معلومة
تذكر دائماً: استخدم ملفات CSS الخارجية كقاعدة أساسية لشكل الموقع، واجعل التنسيق المباشر (Inline Style) مخصصاً فقط للعناصر التي تتغير قيم مظهرها ديناميكياً في الذاكرة أثناء تصفح المستخدم. بهذا نكون قد أقفلنا تماماً وبكفاءة عالية الفصل الثاني بجميع قواعده التنسيقية وفلسفة العرض الخاصة به.
| 1 | function PremiumCard() { |
| 2 | // حيلة احترافية: حفظ كائن التنسيق في متغير خارجي لجعل الكود أنظف وأسهل في القراءة |
| 3 | const cardStyle = { |
| 4 | backgroundColor: '#673ab7', // لون منصة نوفيل البنفسجي المعتمد |
| 5 | color: '#ffffff', |
| 6 | padding: '25px', |
| 7 | borderRadius: 12, // سيتم ترجمتها تلقائياً إلى 12px |
| 8 | boxShadow: '0 4px 8px rgba(0,0,0,0.1)', |
| 9 | textAlign: 'center' |
| 10 | }; |
| 11 | |
| 12 | return ( |
| 13 | // 1. استدعاء المتغير الذي يحتوي على التنسيق |
| 14 | <div style={cardStyle}> |
| 15 | <h2>الباقة الاحترافية في ريأكت</h2> |
| 16 | <p>احصل على الدعم البرمجي الكامل</p> |
| 17 | |
| 18 | {/* 2. كتابة التنسيق مباشرة داخل العنصر باستخدام الأقواس المزدوجة */} |
| 19 | <button style={{ |
| 20 | backgroundColor: '#ffffff', |
| 21 | color: '#673ab7', |
| 22 | border: 'none', |
| 23 | padding: '10px 20px', |
| 24 | fontWeight: 'bold', |
| 25 | cursor: 'pointer' |
| 26 | }}> |
| 27 | اشترك الآن |
| 28 | </button> |
| 29 | </div> |
| 30 | ); |
| 31 | } |