styled-components المكوّنات المنسّقة
آخر تحديث: 2026-11-03
styled-components المكوّنات المنسّقة
styled-components هي المكتبة الرائدة في CSS-in-JS: تكتب CSS داخل JavaScript عبر القوالب الموسومة (tagged template literals)، وكل مكوّن منسّق يأتي باسم صنف فريد ونطاق خاص به. وتُشتق الأنماط الشرطية من props، وتُحقن السمة عبر ThemeProvider، فيُشارك نظام تصميم واحد عبر التطبيق بأكمله بدل أن يتشتّت بين أوراق الأنماط.
| المجموعة | المنظومة والتقدّم |
|---|---|
| النوع | مكتبة |
| منذ الإصدار | v6 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
npm install styled-components
import styled, { ThemeProvider } from 'styled-components'
const Button = styled.button`
background: ${p => (p.$variant === 'danger' ? '#dc2626' : '#2563eb')};
color: #fff; border: none; border-radius: 6px;
`
// Usage: <Button $variant="danger">Delete</Button>
// Theme: <ThemeProvider theme={{ fg: '#111' }}>…</ThemeProvider>
// Read the theme inside interpolation functions with props.theme⚙️ المعاملات
| styled tag template | نص CSS داخل styled.button`…`؛ وتستطيع دوال ${interpolation} قراءة props أو السمة لاشتقاق أنماط شرطية. |
|---|---|
| $variant and other transient props | الـ props التي تبدأ بـ $ تشارك فقط في منطق التنسيق ولا تُمرَّر قط إلى DOM — وهو الأسلوب الموصى به في v6. |
| theme (ThemeProvider) | كائن السمة الموزَّع عبر Context؛ وكل مكوّن منسّق يستطيع قراءته كـ props.theme داخل دوال الإقحام الخاصة به. |
القيمة المرجعة：لا قيمة مرتجعة — راجع المثال لاستخدام مكتبة الطرف الثالث.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
محاكاة: النقر على زر تبديل السمة ينقل خلفية البطاقة ونصّها وحدودها بين سمات فاتحة وداكنة عبر انتقال CSS مدته 0.3 ثانية، وتتبع لوحة ألوان الزر السمة كذلك. وهذا يوضّح فكرة «كائن السمة يقود الأنماط» في CSS-in-JS؛ وفي styled-components الحقيقية تُوفَّر السمة عبر ThemeProvider.💡 النقاط الأساسية
⚠️ تحذير تكلفة وقت التشغيل: كل مكوّن منسّق يولّد أنماطه ويحقنها ديناميكيًا على العميل، لذا في القوائم الكبيرة الحسّاسة للأداء يُفضَّل وحدات CSS أو Tailwind.
💡 نصيحة ضع بادئة $ للـ props العابرة (مثل $variant) كي لا يُمرَّر منطق التنسيق إلى DOM كسمة غير قياسية، ما يتجنّب تحذيرات React.
ℹ️ ملاحظة لا تستطيع مكوّنات React الخادمية (RSC) استخدام styled-components؛ ضع المكوّنات المنسّقة داخل مكوّن عميل 'use client'.
🏷️ المزيد من المنظومة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما مزاياها مقارنة بـ Sass/Less؟
ج الأنماط بجوار المكوّن، ويدعم إقحام props وحقن السمة، وتكون أسماء الأصناف فريدة تلقائيًا فلا تتعارض. والثمن هو زائد وقت التشغيل وتكلفة ضبط SSR، فزِن ذلك مقابل حجم المشروع.
س هل تتجاوز الأنماط بعضها؟
ج لا تعارض: كل مكوّن منسّق يولّد اسم صنف فريدًا. لكن عند تداخل المكوّنات تظل قواعد CSS العادية للتخصيص المتساوي سارية، فانتبه لترتيب الكتابة.
س بماذا أنصح عند الترقية من v5 إلى v6؟
ج أزال v6 عدة واجهات مهجورة، ويدعم الـ props العابرة المسبوقة بـ $ افتراضيًا ويحقن الأنماط أسرع. وراجع دليل التهجير الرسمي بندًا بندًا قبل الترقية؛ ومعظم المشاريع لا تحتاج إلا تغييرات قليلة.
