مرحبا يا هبر! أقدم لكم ترجمة المقال
"4 طرق لأسلوب مكونات رد الفعل" .
حتى الآن ، تم تطوير العديد من الطرق لأسلوب مكونات التفاعل. من المكتبات إلى استخدام ملفات CSS التقليدية. الاختيار واسع جدًا وعلى الأرجح سيكون وفقًا لتفضيلاتك. فيما يلي أربع طرق لأسلوب مكونات رد الفعل.
مضمنة المغلق
نظرًا لأن JSX يتم تحويله إلى عناصر HTML ، فإن هذا يسمح لك باستخدام سمة النمط. يمكن تطبيق الأنماط على العناصر ببساطة عن طريق تمرير كائن لها خصائص. سيبدو شيء من هذا القبيل:
ومع ذلك ، فإن هذه الطريقة محدودة للغاية. لا يمكن استخدام المحددات الزائفة ، مثل: hover ، وكذلك استعلامات الوسائط. ولكن هذا لا يعني أنه لا ينبغي استخدامه. يمكن استخدامه عندما يكون هناك 2 أو 3 خصائص فقط لا تتطلب محددات زائفة أو استعلامات وسائط ، و / أو في المواقف التي تتطلب استخدام الشروط في الأنماط.
مكتبات التصميم
أحب فقط تعلم مكتبات أو أطر عمل جديدة. هذه الطريقة هي المفضلة لدي لتصميم مكونات رد الفعل. هناك العديد من مكتبات التصميم التي لا تسمح لك بتصميم المكونات فحسب ، بل توفر أيضًا "ميزات فائقة" إضافية ، كما أسميها ، إلى جانب جميع ميزات CSS التي تسهل الأمور كثيرًا.
قد يبدو مثال الاستخدام كما يلي:
ما ورد أعلاه مثال على استخدام مكتبة المكونات ذات النمط.
يسمى الغلاف بمكون على غرار. يتم تعريف الأنماط في ثابت Wrapper ، الذي يقوم ببساطة بإنشاء مكون بهذه الأنماط. ما عليك سوى تحديد نوع العنصر الذي تحتاجه ، على سبيل المثال: div أو header أو img ، واستخدامه كما لو كان مكون React. ليست عناصر HTML ، مجرد مكونات ، مما يجعل الشفرة أنظف وأسهل للقراءة.
هذا مجرد تفضيلاتي. ربما ترغب في استخدام div ، أو مشاهدة عناصر HTML الأصلية. لا مشكلة! طورت أكاديمية خان مكتبة أفروديت ، التي تستخدم عناصر HTML ولكنها تُلحق الأنماط للمكون باستخدام سمة className.
مقالتي عن أفروديتتحتوي هذه المكتبات أيضًا على العديد من الميزات الإضافية التي تتيح لك القيام بأشياء رائعة. هناك العديد من المكتبات ، لذلك تحتاج فقط إلى محاولة معرفة أي منها سيبقى معك.
هنا هما الأكثر شعبية في الوقت الحالي:
https://www.styled-components.com/https://glamorous.rocks/الأنماط الخارجية
يمكنك كتابة الأنماط في ملف CSS خارجي واستيرادها في المكون عند الضرورة. ربما كانت هذه هي الطريقة الأولى التي تعلمتها عندما بدأت تعلم رد الفعل. ومع ذلك ، عند إضافة عناصر إضافية ، هناك مشكلة في تسميتها. جميع الأنماط في النطاق العالمي. على سبيل المثال ، كان لديك عنصران بالاسم نفسه الذي أنشأته أنت أو زميلك في الفريق ، وفي هذه الحالة قد تواجه هذه المشكلة.
وحدات CSS
تشبه وحدات CSS إلى حد كبير كتابة CSS في الملفات الخارجية. والفرق الوحيد هو أن الأنماط مغلفة ، على عكس الاستخدام التقليدي لملفات CSS الخارجية. هذا يعني أن الأنماط لن تتعارض مع بعضها البعض أو الكتابة فوق بعضها البعض. تستخدم نفس الأساليب المستخدمة في CSS التقليدية. كما يسمح باستخدام جميع المنهجيات الجيدة ، مثل BEM. يمكنك قراءة المزيد هنا:
https://github.com/css-modules/css-modulesحتى لا تقرر استخدام: CSS التقليدية ، أو وحدات CSS ، أو CSS المضمنة ، أو مكتبات التصميم ، أو مجموعة من هذه الأساليب ، في رأيي ، كل ذلك يرجع إلى تفضيلاتك وتفضيلات فريقك.
شكرا للقراءة. وجدت خطأ؟ لا تتردد في إخباري عنها. طاب يومك!