كيفية بناء مكون على غرار قابل للتصحيح

https://unsplash.com/photos/4gKHjKG7ty4

المكونات المُصممة هي مكتبة CSS-In-JavaScript. يتيح لك كتابة كود CSS داخل ملفات React JSX. تكون الحياة جيدة عندما يمكن تغيير خصائص CSS الخاصة بالمكون ديناميكيًا باستخدام مكونات نمطية.

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

ابدء

في البداية ، لنصنع مكونًا بملف CSS تقليدي.

في الوقت الحالي ، يشبه المكون الصورة أدناه.

لطيف جدا هاه !؟

اصنع لقب "Cute Puppy" بلون آخر

دعنا نعطي Content.jsx دعامة. لجعلها بسيطة ، إعطائها دعامة تسمى skyblue.

الآن ، يمكننا تغيير خصائص Content.jsx CSS بناءً على skyblue. أريد أن أقدم لكم طريقتين لإضافة خصائص CSS جديدة عبر CSS العام.

مضمنة ستايل

كما ترى ، نأخذ skyblue كشرط لإضافة خصائص CSS إلى كائن النمط. ثم نقوم بحقن كائن النمط كنمط مضمن. الآن ستبدو النتيجة هكذا ...

لون العنوان هو الآن السماء الزرقاء! الآن دعنا ننتقل إلى الطريقة الثانية.

إضافة فصول CSS جديدة

كما تعلمون ، لقد صنعنا فئة CSS تسمى المحتوى - skyblue. هذا واضح لجعل لون السماء زرقاء. نريد إضافة هذه الفئة إلى عنوان "Cute Puppy". ما نقوم به هو إنشاء صفيف لتخزين فئات CSS ، ثم استخدام طريقة الصلة لتقسيم الفئات بمساحة. حتى الآن ، فإن className سيكون مثل

Cute Puppy
. ستبدو النتيجة هي نفسها مثل طريقة النمط المضمن.

يمكنك أن ترى أنه ليس من المناسب تعديل الأنماط بكلتا الطريقتين أعلاه ، خاصة بالنسبة لمكونات واجهة المستخدم المعقدة. لا تريد أن تكتب العديد من عبارات الشرط لتصميم مكوناتك ، أليس كذلك؟

لذا ، ما هي إيجابيات وسلبيات كل من النمط المضمن وإضافة فصول CSS جديدة؟

الايجابيات

  1. إنه CSS و vanilla JS عام - لا تحتاج إلى تعلم بناء جملة جديد وواجهة برمجة التطبيقات.
  2. سهولة تصحيح الأخطاء باستخدام devtools للمتصفحات.

سلبيات

  1. ليس من المرن تعديل النمط المضمن بسبب خصوصية CSS. لا يمكنك ببساطة إضافة فئة لتجاوز النمط المضمن لأن النمط المضمن له خصوصية أعلى.
  2. ليس من الواضح معرفة الفئات المدرجة في className من خلال إضافة فئات CSS جديدة. عندما ترى هذا النوع من التعليمات البرمجية
    Cute Puppy
    ، يجب عليك الرجوع إلى المنطق الذي أضفته إلى الفئات. سيكون ذلك عيبًا كبيرًا عندما يكون لديك الكثير من className لتعديله.

لهذا السبب أود أن أعرض لكم مكونات التصميم.

نصب مكونات

استخدم أفضل بتات ES6 و CSS لتصميم تطبيقاتك دون ضغط
نصب مكونات

Styled-components هي مكتبة تسهل تعديل خصائص CSS. يمكنك فقط تثبيته عبر npm install styled-components - حفظ أو غزل إضافة مكونات styled. ثم يمكنك استخدام مكونات styled لتصميم مكوناتك. لنأخذ لطيف الجرو كمثال.

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

const زر = styled.button` / * خصائص CSS * / `

يعني هذا المكون الزر لتقف على تقديم عنصر على غرار <زر />. ثم يمكننا ببساطة نقل خصائص CSS إلى كل مكون مكون. هذا هو! بهذه البساطة! الآن يمكنك رؤية النسخة الأصلية من Cute Puppy.

ماذا عن تغيير لون العنوان باستخدام المكونات المصممة؟ مكونات التصميم تستفيد من قوالب JavaScript ES6 الحرفية. يمكنك تمرير دالة إلى قالب الحرفي. سيكون ذلك مفيدًا عندما تريد تعديل خصائص CSS استنادًا إلى الدعائم. دعونا نتعمق في الموضوع عبر Cute Puppy.

نقوم بتمرير sky propue إلى مكون العنوان الذي تم إنشاؤه باستخدام مكونات styled. ثم يمكننا ببساطة تمرير دالة إلى خصائص CSS التي نريد تعديلها عبر القوالب الحرفية. كما ترون ، نقوم بتمرير دالة السهم للدعائم => (props.skyblue؟ 'skyblue': 'black') لتحديد أي شرط يجب أن يكون لون العنوان أزرق سماوي ، وننتهي فقط من تغيير لون العنوان!

ماذا عن تصحيح الأخطاء

دعنا نفتح Chrome Devtools لمعرفة ما يحدث عندما نبني مكونًا بمكونات مصممة.

ما حدث على Chrome Devtools

تحتوي المكونات الأنيقة على نظام وحدة CSS مدمج. هذا شيء عظيم لحل مشكلة الصراع الأسماء. ومع ذلك ، لا نعرف بالتأكيد الفئات التي نستخدمها عندما نحاول تصحيح الأخطاء على Chrome Devtools. علاوة على ذلك ، عندما نتحقق من وظيفة التجسيد في Content.jsx:

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

بالنظر إلى المشكلات المذكورة أعلاه ، أريد أن أقدم طريقة بسيطة لإنشاء مكون قابل للنزع قابل للضبط ، والذي يجمع بين CSS العام والمكونات المصممة.

الجمع بين محددات CSS مع المكونات ذات النمط

في بداية هذا الجزء ، أريدك أن تعرف كيفية تصميم المكونات الحالية بمكوناتها الأنيقة.

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

نحتاج إلى إضافة className إلى المكونات العامة ، ويمكننا تصميمها بسهولة باستخدام المكونات المصممة. دعنا نرى كيف نستفيد منه لبناء مكون قابل للنزع.

نحن بحاجة إلى التفاف Content.jsx عبر className prop ويمكننا تصميمه باستخدام هذا النمط:

const StyledContent = styled (Content) `/ * CSS Properties * /`

ثم يمكننا التفاف أي مكون في مكون التصميم. بالإضافة إلى ذلك ، يمكننا أيضًا استخدام قوة محددات CSS داخل المكون المصمم. أكثر من ذلك ، بناء جملة SCSS متاح في مكونات على غرار! دعونا نرى كيف يحدث عندما نفتح وحدة التحكم في Chrome Devtools.

الآن الفصول ذات معنى ، أليس كذلك؟ وما زلنا نستفيد من نظام وحدة CSS المضمنة بسبب دعم className. بكل بساطة ، تحتاج فقط إلى الاهتمام بأسماء CSS الداخلية داخل المكون ، فستكون بخير. هل تتذكر كيف نقوم بتعديل خصائص CSS من خلال تمرير وظيفة إلى مكونات ذات نمط؟ لا يزال يعمل مع هذه الطريقة! بالطبع ، ستظل النتيجة تبدو ...

الحياة لم تكن أبدا جميلة جدا!

يتم إحتوائه

لقد مررنا بطريقتين لتصميم عنصر عبر CSS التقليدي. ثم تعلمنا كيفية تصميم المكونات بسهولة باستخدام المكونات المصممة. في النهاية ، قمنا بدمج محددات CSS مع المكونات المصممة. الآن يمكن تصميم المكونات بسهولة ويمكن تصحيحها أيضًا.

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

DEMO

مصدر الرمز

يمكنك التحقق من الكود المصدري لكل طريقة في Github repo

1. مضمنة ستايل

2. إضافة فئة جديدة

3. على غرار المكونات

4. الجمع بين محددات CSS مع المكونات على غرار

شكرا لكم على قراءة مقالتي. آمل أن لا تضيع وقتك. إذا أعجبك هذا المقال ، فلا تتردد في إعطائي صفقًا. سوف تحفزني التصفيق لك لكتابة المزيد من المقالات عالية الجودة ️.

تابعني على تويتر

اتبعني على جيثب

الاتصال بي على LinkedIn