تعمل مكتبة Emotion على تبسيط استخدامك لـ CSS في React وتضيف بعض ميزات بناء الجملة المفيدة أيضًا.

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

ما هي العاطفة؟

Emotion هي مكتبة لتصميم تطبيقات React توفر طريقة بسيطة وفعالة لإدارة أنماطك. يسمح لك بكتابة CSS في JavaScript ويوفر واجهة برمجة تطبيقات مرنة لتصميم مكوناتك.

تتمثل إحدى الفوائد الرئيسية لاستخدام Emotion لتصميم تطبيق React الخاص بك في أنه يوفر طريقة أكثر فاعلية لإدارة أنماطك. على سبيل المثال ، يمكنك استخدام أسماء فئة متطابقة في مكونات متعددة دون التعرض لخطر حدوث تضارب في التسمية عند العمل مع CSS / SASS.

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

كيفية تثبيت Emotion

لإضافة مكتبة Emotion إلى تطبيق React الخاص بك ، قم بتشغيل الأمر الطرفي التالي:

تثبيت npm - حفظ @ العاطفة / رد فعل
instagram viewer

يجب الآن تثبيت مكتبة Emotion في مشروعك وجاهزة للاستخدام لتصميم تطبيق React الخاص بك.

التصميم باستخدام عنصر css للعاطفة

بمجرد تثبيت مكتبة Emotion ، ستتمكن من استخدام ملف المغلق دعم لتصميم تطبيق React الخاص بك. ال المغلق يشبه prop خاصية style حيث يمكنك تمرير أنماط إليه في شكل سلاسل أو كائنات JavaScript عادية.

لأسلوب التطبيق الخاص بك باستخدام المغلق prop ، يجب عليك استيراده من ملف @ العاطفة / رد فعل مكتبة ، ثم حدد الأنماط الخاصة بك:

/** تضمين التغريدة @المشاعر/تتفاعل */
يستورد تتفاعل من'تتفاعل';
يستورد {css} من"@ العاطفة / رد فعل";
وظيفةبرنامج() {
يعود (
 حشوة: 0.5rem 1ريم.
 الحدود: لا شيء ؛
 عائلة الخطوط: مخطوطة ؛
 نصف قطر الحد: 12مقصف ؛
 لون: #333333;
 لون الخلفية: يرث ؛
 بداية كتلة الهامش: 2ريم.
 نهاية كتلة الهامش: 2ريم.
`}>
 انقر فوق لي
 </button>
 )
}


يصدّرتقصير برنامج؛

السطر الأول من الكود ، / ** @ jsxImportSource @ emotion / رد فعل * /، هو تعليق معين يجب عليك إضافته إلى ملف JSX للإشارة إلى أنه يجب استخدام مكتبة Emotion باعتبارها JSX pragma لهذا الملف.

في JSX ، pragma هي وظيفة تقوم بتحويل بناء جملة JSX إلى JavaScript عادي. بشكل افتراضي ، تستخدم React الامتداد تفاعل. إنشاء عنصر تعمل مثل JSX pragma. ومع ذلك ، مع تضمين التغريدة تعليق ، يمكنك تحديد براغما مختلفة.

في هذه الحالة ، فإن ملف @ العاطفة / رد فعل يطلب pragma من JSX استخدام ملف شبيبة وظيفة من مكتبة العاطفة لتحويل كود JSX. من خلال إضافة تعليق pragma إلى ملف JSX ، يمكنك استخدام ميزات CSS-in-JS الخاصة بمكتبة Emotion في مكوناتك.

يعرض مكون الزر زرًا مع بعض التصميم المخصص. هنا ، المغلق يضيف الدعامة التصميم المخصص لعنصر الزر.

ال المغلق يدعم prop أيضًا التصميم المتداخل. يسمح لك النمط المتداخل بكتابة أنماط متداخلة مع بعضها البعض.

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

/** تضمين التغريدة @المشاعر/تتفاعل */
يستورد تتفاعل من'تتفاعل';
يستورد {css} من"@ العاطفة / رد فعل";
وظيفةبرنامج() {
يعود (
 حشوة: 0.5rem 1ريم.
 الحدود: لا شيء ؛
 عائلة الخطوط: مخطوطة ؛
 نصف قطر الحد: 12مقصف ؛
 لون: #333333;
 لون الخلفية: يرث ؛
 بداية كتلة الهامش: 2ريم.
 نهاية كتلة الهامش: 2ريم.


 &:يحوم{
 اللون: # e2e2e2 ؛
 لون الخلفية: #333333;
 }
`}>
 انقر فوق لي
 </button>
 )
}
يصدّرتقصير برنامج؛

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

تمرير أنماط الكائن إلى دعامة css

ال المغلق يقبل prop أيضًا أنماط كائن JavaScript العادية. عند تصميم عدة مكونات ، يتيح لك استخدام أنماط الكائنات إعادة استخدام الأنماط في مكوناتك.

لتمرير أنماط الكائن إلى ملف المغلق prop ، عرّف الأنماط ككائن JavaScript ومررها إلى الخاصية:

مقدار ثابت النمط = {
 حشوة: "0.5 ريم 1 ريم",
 حدود: 'لا أحد',
 خط العائلة: "مخطوطة",
 الحدود: "12 بكسل",
 لون: '#333333',
 لون الخلفية: 'يرث',
 الهامش "2rem",
 marginBlockEnd: "2rem",
'&:يحوم': {
 لون: "# e2e2e2",
 لون الخلفية: '#333333',
 }
}
يعود (
"برنامج">

لاحظ أن أسماء خصائص CSS تكون باسم camelCased بدلاً من الواصلة. هذا بسبب تعريف الأنماط على أنها كائنات JavaScript ، والتي تستخدم اصطلاحات تسمية camelCase.

التصميم باستخدام المكونات المصممة

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

ال على غرار تتيح لك الوظيفة إنشاء مكونات نمطية قابلة لإعادة الاستخدام. لاستخدام ال على غرار وظيفة ، قم باستيرادها من ملف العاطفة / على غرار مكتبة.

للحصول على @ العاطفة / على غرار مكتبة في التطبيق الخاص بك ، ستقوم بتثبيتها في مشروعك. يمكنك القيام بذلك عن طريق تشغيل الأمر التالي في المحطة الطرفية لمشروعك:

npm install @ emotion / على غرار

بعد تثبيت ملف @ العاطفة / على غرار مكتبة ، قم باستيراد ملف على غرار وظيفة وتحديد الأنماط الخاصة بك:

يستورد على غرار من"@ العاطفة / على غرار";
مقدار ثابت Button = Styled.button ({
 حشوة: "0.5 ريم 1 ريم",
 حدود: 'لا أحد',
 خط العائلة: "مخطوطة",
 الحدود: "12 بكسل",
 لون: '#333333',
 لون الخلفية: 'يرث',
 الهامش "2rem",
 marginBlockEnd: "2rem",


'&:يحوم': {
 لون: "# e2e2e2",
 لون الخلفية: '#333333',
 }
})
يصدّرتقصير زر؛

في كتلة التعليمات البرمجية أعلاه ، مكون ذو نمط زر أنشئ. يمكنك استخدام هذا الزر في تطبيق React الخاص بك مثل أي مكون React آخر.

مثل ذلك:

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








يصدّرتقصير برنامج؛

جعل ملف برنامج سيعرض المكون زرًا بالأنماط المحددة في ملف زر مكون على شاشتك.

ال على غرار الوظيفة تقبل أيضا أنماط السلسلة. يبدو مختلفًا عن أسلوب أنماط الكائن ولكنه يعمل بشكل مشابه.

يستورد على غرار من"@ العاطفة / على غرار";
مقدار ثابت زر = زر على غرار`
 حشوة: 0.5rem 1ريم.
 الحدود: لا شيء ؛
 عائلة الخطوط: مخطوطة ؛
 نصف قطر الحد: 12مقصف ؛
 لون: #333333;
 لون الخلفية: يرث ؛
 بداية كتلة الهامش: 2ريم.
 نهاية كتلة الهامش: 2ريم.


 &:يحوم {
 اللون: # e2e2e2 ؛
 لون الخلفية: #333333;
 }
`
يصدّرتقصير زر؛

تصفيف فعال مع العاطفة

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

لذلك إذا كنت تبحث عن طريقة أكثر كفاءة ومرونة لتصميم مكونات React الخاصة بك ، ففكر في Emotion.