استخدام Styled Components لتصميم واجهات في React

الدرس الرابع والعشرون: استخدام Styled Components لتصميم واجهات في React

في هذا الدرس، سنتعرف على Styled Components، وهو مكتبة شهيرة في React تُستخدم لتصميم الواجهات باستخدام CSS-in-JS. سنتناول كيفية استخدامها في تطبيقات React، والفرق بينها وبين استخدام CSS التقليدي.

1. ما هي Styled Components؟

Styled Components هي مكتبة لـ React تسمح لك بكتابة CSS داخل JavaScript. باستخدام Styled Components، يمكنك إنشاء مكونات مخصصة تحمل أنماطًا مرتبطة بها داخل نفس الملف الذي يحتوي على الكود الخاص بالمكون.

الميزة الرئيسية لـ Styled Components هي أنها تساعد في تعريف الأنماط (styles) بطريقة منظمة ومرنة، مما يسهل إدارة الأنماط في التطبيقات الكبيرة والمعقدة. بالإضافة إلى ذلك، تتيح لك Styled Components الاستفادة من المزايا الحديثة للـ JavaScript، مثل المتغيرات والدوال والعمليات الحسابية داخل الأنماط.

2. كيفية تثبيت Styled Components في React

لتثبيت Styled Components في مشروع React، يمكننا استخدام الأمر التالي:

npm install styled-components

أو باستخدام yarn:

yarn add styled-components

بعد تثبيت المكتبة، يمكننا البدء في استخدامها في تطبيقنا.

3. كيفية إنشاء وتصميم مكونات CSS باستخدام JavaScript

يمكنك استخدام Styled Components لتعريف الأنماط بشكل مماثل لكتابة CSS التقليدي، ولكن باستخدام JavaScript داخل المكونات. إليك كيفية استخدام Styled Components لإنشاء مكونات ذات أنماط مخصصة:

import React from 'react';
import styled from 'styled-components';

// تعريف مكون زر باستخدام Styled Components
const Button = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  
  &:hover {
    background-color: #45a049;
  }
`;

const App = () => {
  return (
    <div>
      <h1>Welcome to Styled Components!</h1>
      <Button>Click Me!</Button>
    </div>
  );
}

export default App;

الشرح:

• في هذا المثال، نستخدم styled.button لإنشاء مكون Button يحمل أنماط CSS مخصصة.
• يتم تضمين CSS داخل المكون باستخدام template literals (التي تُعرف على أنها `).
• عند استخدام هذا المكون داخل تطبيق React، ستُطبق الأنماط التي تم تعريفها عليه مباشرة.

4. الفرق بين استخدام CSS و Styled Components في React

على الرغم من أن كلا من CSS و Styled Components يُستخدمان لتصميم واجهات المستخدم، إلا أن هناك اختلافات رئيسية بينهما:

الاختلافات الرئيسية بين CSS و Styled Components:

العنصر	CSS التقليدي	Styled Components
طريقة الكتابة	يتم كتابة الأنماط في ملفات منفصلة .css	يتم كتابة الأنماط داخل JavaScript باستخدام styled-components
التنظيم	الأنماط تكون منفصلة عن الكود، مما قد يؤدي إلى مشاكل في التنظيم في المشاريع الكبيرة	الأنماط تكون مرتبطة مباشرة بالمكونات، مما يسهل تنظيم الكود
إعادة الاستخدام	يمكن استخدام الأنماط عبر إضافة className للمكونات	يتم استخدام المكونات نفسها عبر styled-components مما يسهل إعادة الاستخدام
الخصائص الديناميكية	صعوبة التعامل مع الخصائص الديناميكية في CSS التقليدي	يمكن استخدام المتغيرات والدوال في الأنماط داخل Styled Components
التصميم حسب الحالة	يتطلب كتابة أنماط إضافية لفصل الحالات المختلفة (مثل التفاعل مع الماوس)	من السهل تغيير الأنماط بناءً على الحالة أو الـ props باستخدام Styled Components

5. مزايا استخدام Styled Components في React

• تعريف الأنماط داخل المكونات: مما يجعل من السهل التعامل مع الأنماط الخاصة بكل مكون.
• سهولة إعادة الاستخدام: يمكن إنشاء مكونات أنماط مخصصة وإعادة استخدامها عبر التطبيقات.
• الدعم للأنماط الديناميكية: يمكن تمرير الخصائص (props) لتغيير الأنماط بناءً على حالتها.
• تجنب التصادم بين الأنماط: بما أن الأنماط يتم تطبيقها بشكل مخصص على المكونات، فإنها لا تتداخل مع الأنماط الأخرى في التطبيق.
• المزيد من التحكم: يمكن استخدام JavaScript لإنشاء أنماط ديناميكية بناءً على البيانات أو التفاعلات.

6. كيفية التعامل مع الأنماط الديناميكية في Styled Components

يمكنك تمرير props لتخصيص الأنماط في Styled Components. إليك مثال على كيفية استخدام الأنماط الديناميكية بناءً على الـ props:

import React from 'react';
import styled from 'styled-components';

// مكون Button يدعم الأنماط الديناميكية باستخدام props
const Button = styled.button`
  background-color: ${(props) => props.primary ? '#4CAF50' : '#008CBA'};
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  
  &:hover {
    background-color: ${(props) => props.primary ? '#45a049' : '#005f6b'};
  }
`;

const App = () => {
  return (
    <div>
      <h1>Styled Components with Props</h1>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

export default App;

الشرح:

• في هذا المثال، نمرر prop يسمى primary إلى Button. بناءً على القيمة، يتم تغيير لون الخلفية في الزر.
• إذا كان primary هو true، سيكون الزر باللون الأخضر، وإذا لم يكن، سيكون باللون الأزرق.

7. الملخص

Styled Components هي مكتبة رائعة لـ React تتيح لك كتابة CSS داخل JavaScript. فهي توفر طريقة مرنة لتنظيم وتصميم الواجهات، مع القدرة على استخدام props والأنماط الديناميكية داخل المكونات. يمكن اعتبار Styled Components بديلاً حديثًا ومنظمًا لـ CSS التقليدي في التطبيقات الحديثة التي تعتمد على React.