تعلم استخدام styled-components في React لتنسيق المكونات بشكل احترافي

🎨 مقدمة إلى styled-components في React

styled-components هي مكتبة رائعة تتيح لك كتابة أنماط CSS مباشرة داخل مكونات React باستخدام JavaScript. بدلاً من فصل CSS عن JS، يمكنك الآن دمجها معاً لإنشاء مكونات مخصصة بأنماط فريدة!

🔧 تثبيت وإعداد styled-components

لبدء استخدام styled-components، تحتاج أولاً إلى تثبيتها في مشروع React الخاص بك:

npm install styled-components

بعد التثبيت، قم باستيراد المكتبة في ملفك:

import styled from 'styled-components';

🏗️ إنشاء أول مكون مخصص بك

لننشئ أول زر مخصص باستخدام styled-components:

const StyledButton = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

// استخدام المكون في التطبيق
function App() {
  return <StyledButton>انقر هنا</StyledButton>;
}

🎯 المزايا الرئيسية لـ styled-components

1. التغليف التلقائي: الأنماط مخصصة للمكون فقط ولا تؤثر على其他地方
2. الديناميكية: يمكنك تغيير الأنماط بناءً على props
3. الصيانة السهلة: كل شيء في مكان واحد
4. أداء محسن: يتم تحميل الأنماط عند الحاجة فقط

💡 إنشاء أنماط ديناميكية مع props

يمكنك جعل أنماطك تستجيب للخصائص (props) بشكل ديناميكي:

const DynamicButton = styled.button`
  background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  padding: ${props => props.large ? '15px 30px' : '10px 20px'};
  border-radius: 5px;
  
  &:hover {
    background-color: ${props => props.primary ? '#0056b3' : '#545b62'};
  }
`;

// استخدامات مختلفة
function Buttons() {
  return (
    <div>
      <DynamicButton primary>زر أساسي</DynamicButton>
      <DynamicButton large>زر كبير</DynamicButton>
    </div>
  );
}

🎨 تمديد المكونات الحالية

يمكنك إنشاء مكونات جديدة بناءً على مكونات موجودة:

const SuccessButton = styled(DynamicButton)`
  background-color: #28a745;
  
  &:hover {
    background-color: #218838;
  }
`;

// استخدام الزر الجديد
function SuccessExample() {
  return <SuccessButton>نجاح!</SuccessButton>;
}

📱 استجابة للشاشات المختلفة

يمكنك بسهولة إضافة media queries للتصميم المتجاوب:

const ResponsiveBox = styled.div`
  width: 100%;
  padding: 20px;
  
  @media (min-width: 768px) {
    width: 50%;
  }
  
  @media (min-width: 1024px) {
    width: 30%;
  }
`;

🚀 أفضل الممارسات والنصائح

1. التسمية الواضحة: استخدم أسماء توضح الغرض من المكون
2. إعادة الاستخدام: أنشئ مكونات أساسية يمكن إعادة استخدامها
3. التنظيم: حافظ على ملفاتك منظمة ومرتبة
4. الأداء: تجنب إنشاء مكونات داخل دوال التصيير