ما هي المكونات المصممة؟

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

فوائد استخدام المكونات المصممة

1. التصميم الديناميكي: تسمح لك المكونات المصممة باستخدام JavaScript لتعيين الأنماط ديناميكيًا بناءً على الدعائم أو الحالة أو أي متغير آخر.

2. تنظيم أفضل: إن إبقاء الأنماط قريبة من المكونات التي تؤثر عليها يجعل التعليمات البرمجية الخاصة بك أكثر نمطية وأسهل في الإدارة.

3. لا توجد أخطاء في أسماء الفئات: نظرًا لأن الأنماط مخصصة للمكونات، فلا داعي للقلق بشأن تضارب أسماء الفئات أو مشكلات الخصوصية الشائعة في CSS التقليدية.

4. دعم السمات: تقدم Styled Components دعمًا مدمجًا للسمات، مما يجعل من السهل تطبيق أنماط متسقة عبر التطبيق الخاص بك.

تثبيت المكونات المصممة

للبدء في استخدام Styled Components، يلزمك تثبيته عبر npm أو الغزل:

npm install styled-components

or

yarn add styled-components

الاستخدام الأساسي

إليك مثال أساسي لتوضيح كيفية عمل المكونات المصممة:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return  Login ;
}

التكيف على أساس الدعائم

المكونات المصممة وظيفية، لذا يمكننا بسهولة تصميم العناصر ديناميكيًا.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    

      Button A
      Button B
    
  )
}

السمات

تدعم المكونات المصممة أيضًا السمات، مما يسمح لك بتحديد مجموعة من الأنماط (مثل الألوان والخطوط وما إلى ذلك) وتطبيقها بشكل متسق عبر التطبيق الخاص بك.

أولاً، عليك تحديد الموضوع الخاص بك:

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

ثم قم بتغليف التطبيق الخاص بك باستخدام ThemeProvider وتمرير المظهر الخاص بك:

const App = () => (
  
    

      Primary Button
      Default Button
    
  
);

أخيرًا، قم بالوصول إلى خصائص السمة في المكونات المصممة:

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

خاتمة

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