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

دعنا نرى كيفية إعداد المكونات المصممة ودمجها في تطبيق React الخاص بك.

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

يمكنك تثبيت مكونات نمطية عن طريق تشغيل هذا الأمر في جهازك الطرفي:

npm أنا على غرار المكونات

لتثبيت المكونات المصممة باستخدام الغزل ، قم بتشغيل:

يضيف الغزل مكونات على غرار

إنشاء مكون منمق

المكون المصمم يشبه تمامًا مكون React القياسي ، مع الأنماط. هناك العديد إيجابيات وسلبيات المكونات المصممة، والتي تعتبر مهمة في الاعتبار للاستخدام الصحيح.

تبدو البنية العامة كما يلي:

يستورد على غرار من"مكوّنات نمطية";

مقدار ثابت اسم المكون = على غرار. عتبة`
 الخاصية: cssValue
`

هنا تقوم بالاستيراد على غرار من مكون على غرار مكتبة. ال على غرار دالة هي طريقة داخلية تقوم بتحويل كود JavaScript إلى CSS فعلي. ال

اسم المكون هو اسم المكون المصمم. ال عتبة هو عنصر HTML / JSX الذي تنوي تصميمه ، مثل div و span و button وما إلى ذلك.

لإنشاء زر نمطي باستخدام مكون ذي نمط ، يجب أولاً إنشاء مكون React يحتوي على عنصر زر.

مثل ذلك:

يستورد تتفاعل من"تتفاعل";
وظيفةزر() {
يعود (
مرحبًا !!!/button>
 )
}

يمكنك الآن إنشاء نمط للزر باستخدام المكونات المصممة:

يستورد على غرار من"مكوّنات نمطية";
مقدار ثابت StyledButton = Styled.button`
 حشوة: 1rem 0.8ريم.
 نصف قطر الحد: 15مقصف ؛
 لون الخلفية: رمادي ؛
 اللون: #FFFFFF ؛
 حجم الخط: 15مقصف ؛
`

بتجميع كل شيء معًا ، ستحتاج إلى استبدال ملف زر علامة مع زر نصب عنصر:

يستورد على غرار من"مكوّنات نمطية";
يستورد تتفاعل من"تتفاعل";
مقدار ثابت StyledButton = Styled.button`
 حشوة: 1rem 0.8ريم.
 نصف قطر الحد: 15مقصف ؛
 لون الخلفية: رمادي ؛
 اللون: #FFFFFF ؛
 حجم الخط: 15مقصف ؛
`
وظيفةزر() {
يعود (
مرحبًا !!!/StyledButton>
 )
}

أنماط التعشيش

يمكنك أيضًا تداخل الأنماط عند العمل مع المكونات ذات الأنماط. مكونات متداخلة تشبه إلى حد ما باستخدام لغة ملحق SASS / SCSS. يمكنك تداخل الأنماط إذا كان المكون يحتوي على علامات متعددة للعناصر ويريد تصميم كل علامة على حدة.

على سبيل المثال:

يستورد تتفاعل من'تتفاعل';
وظيفةبرنامج() {
يعود (


مكونات منمقة </h1>


مرحبًا بكم في عناصر التصميم </p>
 </div>
 )
}

ينشئ هذا الرمز مكونًا يحتوي على ملف h1 عنصر وأ ص عنصر.

يمكنك تصميم هذه العناصر باستخدام ميزة التصميم المتداخلة للمكونات ذات الأنماط:

يستورد تتفاعل من'تتفاعل';
يستورد على غرار من"مكونات على غرار";
مقدار ثابت StyledApp = Styled.div`
 لون: #333333;
 محاذاة النص: مركز ؛
 h1 {
 حجم الخط: 32مقصف ؛
 نمط الخط: مائل ؛
 وزن الخط: عريض ؛
 تباعد الحروف: 1.2ريم.
 تحويل النص: الأحرف الكبيرة ؛ 
 }
 ص {
 بداية كتلة الهامش: 1ريم.
 حجم الخط: 18مقصف ؛
 }
`
وظيفةبرنامج() {
يعود (

مكونات منمقة </h1>


مرحبًا بكم في عناصر التصميم </p>
 </StyledApp>
 )
}

يستخدم هذا الكود مكوّنًا مصمّمًا ويتداخل مع تصميم ملف h1 و ص العلامات.

تكوين واستخدام المتغيرات

تعد القدرة على إنشاء متغيرات ميزة رائعة لمكتبة المكونات المصممة. تمنح هذه القدرة نمطًا ديناميكيًا حيث يمكنك استخدام متغيرات JavaScript لتحديد الأنماط.

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

يستورد على غرار من"مكوّنات نمطية";
مقدار ثابت MainColor = "أحمر";
مقدار ثابت العنوان = Styled.h1`
 اللون: $ {MainColor} ؛
`;
وظيفةبرنامج() {
يعود (
 <>
أهلاً بالعالم!/Heading>
 </>
 );
}

في كتلة التعليمات البرمجية أعلاه ، النص "مرحبا بالعالم!"باللون الأحمر.

لاحظ أن هذا المثال يستخدم ببساطة متغير JavaScript قياسيًا في قالب حرفي بالتزامن مع المكون المصمم. إنها طريقة مختلفة عن باستخدام متغيرات CSS.

تمديد الأنماط

بعد إنشاء مكون مصمم ، سوف تستخدم المكون. قد ترغب في عمل اختلافات دقيقة أو إضافة المزيد من التصميم في بعض المواقف. في مثل هذه الحالات ، يمكنك تمديد الأنماط.

لتوسيع الأنماط ، تقوم بلف المكون المصمم بتنسيق على غرار () منشئ ثم قم بتضمين أي أنماط إضافية.

في هذا المثال ، فإن ملف الزر الأساسي يرث المكون تصميم مكون Button ويضيف لون خلفية مختلفًا باللون الأزرق.

يستورد على غرار من"مكوّنات نمطية";
يستورد تتفاعل من"تتفاعل";
مقدار ثابت زر = زر على غرار`
 حشوة: 1rem 0.8ريم.
 نصف قطر الحد: 15مقصف ؛
 لون الخلفية: رمادي ؛
 اللون: #FFFFFF ؛
 حجم الخط: 15مقصف ؛
`
مقدار ثابت PrimaryButton = على غرار (زر)`
 لون الخلفية: أزرق ؛
`
وظيفةبرنامج() {
يعود (
مرحبًا </Button>
مرحبًا بكم!/PrimaryButton>
 )
}

يمكنك أيضًا تغيير العلامة التي يعرضها المكون المصمم باستخدام الامتداد مثل دعامة.

ال مثل تسمح لك الخاصية بتحديد عنصر HTML / JSX الأساسي الذي سيعرضه المكون المصمم على هيئة.

على سبيل المثال:

يستورد على غرار من"مكوّنات نمطية";
يستورد تتفاعل من"تتفاعل";
مقدار ثابت زر = زر على غرار`
 حشوة: 1rem 0.8ريم.
 نصف قطر الحد: 15مقصف ؛
 لون الخلفية: رمادي ؛
 اللون: #FFFFFF ؛
 حجم الخط: 15مقصف ؛
`
وظيفةبرنامج() {
يعود (
مثل='أ' href ='#'> مرحبًا </Button>
 )
}

هذا الرمز يجعل ملف زر مكون كملف أ عنصر محددًا href يعزو إلى '#'.

خلق الأنماط العالمية

عادةً ما يتم تحديد المكونات ذات الأنماط إلى أحد المكونات ، لذلك قد تتساءل عن كيفية تصميم التطبيق ككل. يمكنك تصميم التطبيق باستخدام التصميم العام.

يقدم Styled-Components أ createGlobalStyle وظيفة تمكنك من إعلان الأنماط على مستوى العالم. ال createGlobalStyle يزيل قيود التصميم على نطاق المكون ويسمح لك بتعريف الأنماط التي تنطبق على كل مكون.

لإنشاء أنماط عامة ، يمكنك استيراد ملف createGlobalStyle تعمل وتعلن عن الأنماط التي تحتاجها.

على سبيل المثال:

يستورد {createGlobalStyle} من"مكونات على غرار";
مقدار ثابت GlobalStyles = createGlobalStyle`
 @يستورد عنوان url (' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 * {
 هامِش: 0;
 حشوة: 0;
 حجم الصندوق: مربع الحدود ؛
 }
 جسم {
 لون الخلفية: #343434;
 حجم الخط: 15مقصف ؛
 اللون: #FFFFFF ؛
 خط العائلة: "مونتسيرات"، بلا الرقيق؛ 
 }
`
يصدّرتقصير جلوبال ستايلز

ثم تقوم باستيراد ملف جلوبال ستايلز مكون في تطبيقك وعرضه. جعل ملف جلوبال ستايلز المكون في مكون التطبيق الخاص بك سوف يطبق الأنماط على التطبيق الخاص بك.

مثل ذلك:

يستورد تتفاعل من'تتفاعل';
يستورد جلوبال ستايلز من'./عالمي';
وظيفةبرنامج() {
يعود (



 </div>
 )
}

المزيد من المكونات الأنماط

لقد تعلمت كيفية إعداد المكونات المصممة وتثبيتها واستخدامها في تطبيق React الخاص بك. تُعد مكتبة المكونات المصممة طريقة فعالة لتصميم تطبيق React الخاص بك. يوفر العديد من الميزات المفيدة التي تسمح بالمرونة في التصميم والتصميم الديناميكي.

هناك الكثير من المكونات المصممة ، مثل الرسوم المتحركة ، و React عبارة عن إطار عمل كبير به الكثير لتتعلمه إلى جانب ذلك.