FullStackReact

4 طرق لاستخدام CSS في react

كتب بواسطة: 15/12/2019 لا يوجد تعليقات

هذا هو الجزء الرابع من مقالات React. انظر لمقدمة react.js هنا

هناك أربعة خيارات مختلفة استخدام CSS في  React. يعتمد كل هذا على ما تفضله شخصياً ويعتمد أيضاً على مدى تعقيد تطبيقك.

إذا كنت تريد إضافة القليل من خصائص التصميم، فإن كتابة الخصائص في السطر (inline styling) هو الخيار الأفضل.

عندما تريد إعادة إستخدام خصائص التصميم في نفس الملف، فإن مركب التصميم (style-component) يكون مثاليًا.

عندما يكون التطبيق أكثر تعقيداً، أوصي باستخدام وحدات CSS (CSS Modules) أو ملف CSS (CSS stylesheets) العادي.

1. ملف css (CSS stylesheet)

ببساطة قم باستيراد ملف css import ‘./DottedBox.css’ حيث يمكنك الحصول على ملف css منفصل لكل مركب.

2. التصميم السطري (Inline styling)

في React، لا يتم تحديد التصميم السطري كسلسلة نصية (string). بدلاً من ذلك يتم تحديدها مع كائن (object) يكون مفتاحه (key)  إصدار camelCased من اسم خاصية CSS حيث يكون اسم الخاصيه camelCase، وقيمته هي القيم المتاحة للخاصية، وعادة ما تكون سلسلة نصية (string).

  • يمكننا إنشاء متغير يخزن خصائص CSS ثم تمريره إلى عنصر مثل style={nameOfvariable}
  • كما يمكننا تمرير التصميم مباشرة style={{color: ‘pink’}}

3. وحدات CSS (CSS Modules)

إن وحدة CSS هي ملف CSS حيث يتم تحديد جميع أسماء الفئات (classes) وأسماء الحركات (animation) محلياً بشكل افتراضي. مقالة رائعة حول وحدات css هنا.

  • مشابه ل css  نقوم باسترداد ملف CSS import styles ‘./DashedBox.css’
  • ومن ثم يمكننا الوصول إلى className مثلما نصل إلى الكائن (object)

:local(.className)- هذا عندما تستخدم  create-react-app بسبب إعدادات webpack.

.className-هذا إذا كنت تستخدم لوحة معلومات react الخاصة بك.

لجعل وحدات CSS تعمل مع Webpack، يجب عليك فقط تضمين الوحدات المذكورة أعلاه وإضافة وحدة التحميل التالية إلى ملف webpack.config.js:

4. المركبات المصممة (styled-components) 💅

المركبات ذات التصميم هي مكتبة أصلية لـ React و React native تسمح لك باستخدام التصاميم التي على مستوى المركبات في التطبيق، والذي تتم كتابته بمزيج من JavaScript و CSS

  • أولا نحتاج إلى تثبيت مكتبة styled-components
  • npm install styled-components –save
  • الآن يمكننا إنشاء متغير عن طريق تحديد عنصر html معين حيث نقوم بتخزين مفاتيح التصميم الخاصة بنا const Div = styled.htmlElemnetcolor: pink
  • ثم نستخدم اسم المتغير كغلاف  <Div></Div> نوع من مركبات react:)
  • نصائح لاستخدام إختصار مفتاح الرموز التعبيرية CTRL+CMD+SPACE💡

كل هذه الطرق لتركيب مركبات react لها إيجابيات وسلبيات.

وكل هذا يتوقف على كل من  ما تفضله شخصياً وتعقيد تطبيقك المحدد.

أقترح عليك أن تقوم بأربعة مشاريع، كل منها بطريقة مختلفة.

استمتع 😃

اترك تعليق