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

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

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

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

التصميم العملي مع className

في React ، يتم تطبيق أنماط CSS العملية من خلال خاصية className .

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

لنلقي نظرة على مثال.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

وهذه ستكون النتيجة:

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

التحذير الوحيد هو أنه مع نمو مشروعك ، تزداد احتمالية تعارض التسمية.

وبالمثل ، فإن تكلفة كفاءة إدارة مئات من أوراق الأنماط مرتفعة بشكل سخيف.

استخدام JSX للأنماط المضمنة

يتيح لك React تصميم عناصر DOM باستخدام أنماط مضمنة. بينما يظل منطق CSS كما هو ، يجب أن يمر النمط نفسه عبر JavaScript. يُعرف هذا أيضًا باسم JSX.

لنلقي نظرة على مثال:

العنوان. js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

شيء واحد ستلاحظه هو أنه بدلاً من كتابة line-height نستخدم lineHeight .

تفسير ذلك هو أنه "نظرًا لأن JSX أقرب إلى JavaScript منه إلى HTML ، فإن React DOM يستخدم اصطلاح تسمية خاصية camelCase بدلاً من أسماء سمات HTML." .

تُستخدم الأنماط المضمنة عادةً لعرض الأمثلة ، ولكن أيضًا لإضافة نمط ديناميكي لعناصر محددة. علاوة على ذلك ، لا تدعم الأنماط المضمنة العناصر الزائفة أو استعلامات الوسائط ، حيث يمكنك تمرير النمط فقط. يعد استخدام ورقة الأنماط بديلاً أفضل.

إنشاء نطاق محلي باستخدام وحدات CSS

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

هذا هو النهج حيث يمكنك تطبيق النطاق المحلي على كل مكون على حدة.

مثل ذلك:

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

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

 .header { composes: header from './style.css'; }

CSS في JS

على عكس أطر مثل Vue و Svelte ، لا توفر React واجهة تصميم خاصة بها.

لذلك ، بينما يمكنك كتابة CSS للمكونات باستخدام الطرق المذكورة أعلاه ، فإن أسلوب الكأس المقدسة هو استخدام CSS في مكتبات JS. لكل مكتبة نقاط قوتها وضعفها ، ولكن بشكل عام ، تظل الفوائد كما هي:

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

الحل الأكثر شيوعًا لـ CSS في JS هو Styled Components.

وتشمل الخيارات البارزة الأخرى Emotion و Linaria. من أجل العرض التوضيحي ، دعنا نلقي نظرة على كيفية دمج CSS في مكون React باستخدام مكتبة Styled Components.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

أولاً ، نقوم بإنشاء مكون جديد يسمى HeaderWrapper والذي سيعرض حاوية <section> لعنوان الرأس الخاص بنا. ثم نقوم بإنشاء مكون آخر يسمى HeaderTitle متغيرات CSS إليه. لذا ، بطريقة ما ، هذا هو بالضبط نفس العمل مع مكونات الويب ، فقط في سياق React.

باستخدام CSS Framework

لا يعني ذلك أن كل شيء في الواجهة الأمامية يتجه نحو الأطر والمكتبات.

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

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

لذلك ، بدلاً من تحديد نمط المكون باستخدام الثوابت ، يمكننا كتابة النمط مباشرةً كما هو محدد في إطار العمل. طريقة مثل هذه فعالة للغاية ، ويمكنك على سبيل المثال - استيراد مكونات واجهة المستخدم (مثل البطاقات) التي صنعها آخرون.

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

استخدام مكتبة واجهة المستخدم

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

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