CSS Academy · درس

Styled-components: القوالب النصية الموسومة

أنشئ مكوّنات React منسقة باستخدام القوالب النصية الموسومة مع مكتبة styled-components.

الدرس 1 من 413 خطوة

Styled-components: القوالب النصية الموسومة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هي Styled-components؟

إن styled-components مكتبة CSS-in-JS لـ React، تتيح لك كتابة CSS مباشرةً داخل ملفات JavaScript باستخدام القوالب النصية الموسومة. ويحصل كل مكوّن منسّق على أسماء أصناف فريدة ومقيّدة النطاق تلقائيًا.

القوالب النصية الموسومة

تتيح القوالب النصية الموسومة في JavaScript لدالة معالجة سلسلة قالب. ويستخدم styled-components هذه الميزة لتحليل CSS:

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

الأنماط الديناميكية باستخدام الخصائص

يمكنك الوصول إلى خصائص المكوّن داخل القالب النصي لتطبيق تنسيق ديناميكي:

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

بديل الخصائص المخصّصة في CSS

بالنسبة إلى القيم الديناميكية الأبسط، فضّل الخصائص المخصّصة في CSS على المنطق المعتمد على الخصائص — فهذا أكثر كفاءة ويقلّل عمليات الاستيفاء في JavaScript:

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

توسيع الأنماط

وسّع مكوّنًا منسّقًا موجودًا لإضافة أنماط:

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

التداخل والمحدّد &

يدعم styled-components التداخل الشبيه بـ Sass باستخدام & للإشارة إلى العنصر الأب:

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

حدّد الأنماط العامة، مثل عمليات إعادة الضبط والأنماط الأساسية، باستخدام createGlobalStyle:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

ThemeProvider

يوفّر styled-components مكوّن ThemeProvider للوصول إلى رموز السمة داخل المكوّنات:

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

// <ThemeProvider theme={theme}><App /></ThemeProvider>

اعتبارات الأداء

ينشئ styled-components أسماء الأصناف أثناء التشغيل. وبالنسبة إلى التطبيقات التي يكون الأداء فيها حاسمًا، فكّر في الاستخراج الثابت باستخدام إضافة Babel أو الانتقال إلى بدائل لا تعتمد على وقت التشغيل، مثل Vanilla Extract أو CSS Modules.

التصيير من جانب الخادم

يدعم styled-components التصيير من جانب الخادم باستخدام واجهة API ServerStyleSheet لجمع الأنماط وإدراجها أثناء التصيير على الخادم، مما يمنع ظهور المحتوى دون تنسيق.

البدائل والمنظومة

تتضمن منظومة styled-components ما يلي: emotion، وهي ذات واجهة API مشابهة؛ وlinaria، التي لا تعتمد على وقت التشغيل؛ وVanilla Extract، الآمنة من ناحية الأنواع؛ وPanda CSS، المعتمدة على أسلوب utility-first. ويوازن كل منها بطريقة مختلفة بين الحمل الزائد أثناء التشغيل وتجربة المطوّر والأداء.

تحقق سريع

كيف يمنع styled-components تعارض أسماء الأصناف بين المكوّنات؟

أجب عليها في الدرس التفاعلي

مراجعة

يستخدم styled-components القوالب النصية الموسومة لتعريف CSS بجوار مكوّنات React. ويمكن للخصائص التحكم في الأنماط الديناميكية من خلال عمليات الاستيفاء في JavaScript. كما يمكن توسيع المكوّنات وتداخلها وجعلها مدركة للسمة باستخدام ThemeProvider. وفي بيئة الإنتاج، فكّر في استخدام إضافة Babel للاستخراج الثابت ودعم التصيير من جانب الخادم. أما البدائل التي لا تعتمد على وقت التشغيل، فقيّم Vanilla Extract أو CSS Modules.

البدء مجانًا

تعلم CSS مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «Styled-components: القوالب النصية الموسومة» مجاني؟

نعم — نص درس «Styled-components: القوالب النصية الموسومة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Styled-components: القوالب النصية الموسومة»؟

أنشئ مكوّنات React منسقة باستخدام القوالب النصية الموسومة مع مكتبة styled-components. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «Styled-components: القوالب النصية الموسومة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

Styled-components: القوالب النصية الموسومة
Emotion: ‏css() وstyled()
CSS Modules: الأنماط ذات النطاق المحدد
Vanilla Extract: CSS-in-JS بلا وقت تشغيل

← العودة إلى CSS Academy