نحن جميعًا على دراية بالطريقة القياسية لـ ربط ورقة الأنماط إلى <head> من مستند HTML ، أليس كذلك؟ هذه مجرد طريقة واحدة من عدة طرق يمكننا من خلالها كتابة CSS. ولكن كيف يبدو تصميم الأشياء في تطبيق من صفحة واحدة (SPA) ، على سبيل المثال في مشروع React؟
تبين أن هناك عدة طرق يمكنك اتباعها لتصميم تطبيق React. يتداخل بعضها مع التصميم التقليدي ، والبعض الآخر ليس كثيرًا. لكن دعونا نحسب كل الطرق التي يمكننا القيام بها.
استيراد أوراق الأنماط الخارجية
كما يوحي الاسم ، يمكن لـ React استيراد ملفات CSS. تشبه هذه العملية كيفية ربط ملف CSS في HTML <head>:
- قم بإنشاء ملف CSS جديد في دليل المشروع الخاص بك.
- اكتب CSS.
- قم باستيراده إلى ملف React.
اذا اعجبك الموضوع لا تنسى الضغط على زر الإعجاب
import "./style.css";يظهر هذا عادةً في أعلى الملف حيث تحدث عمليات الاستيراد الأخرى:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;في هذا المثال ، يتم استيراد ملف CSS إلى ملف App.js من /Components/css المجلد.
اكتب الأنماط المضمنة
قد تكون معتادًا على سماع أن التصميم المضمن ليس جيدًا لقابلية الصيانة وما إلى ذلك ، ولكن هناك بالتأكيد مواقف (هنا واحد!) حيث يكون ذلك منطقيًا. وتعد قابلية الصيانة مشكلة أقل في React ، حيث إن CSS غالبًا ما يكون موجودًا بالفعل داخل نفس الملف على أي حال.
هذا مثال بسيط للغاية على التصميم المضمن في React:
<div className="main" style={{color:"red"}}>لكن الطريقة الأفضل هي استخدام الأشياء:
- أولاً ، قم بإنشاء كائن يحتوي على أنماط لعناصر مختلفة.
- ثم قم بإضافته إلى عنصر باستخدام امتداد
styleالسمة ثم حدد الخاصية التي تريد نمطها.
دعونا نرى ذلك في السياق:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;يحتوي هذا المثال على ملف styles كائن يحتوي على كائنين آخرين ، أحدهما لـ .main فئة والأخرى لإدخال النص ، والتي تحتوي على قواعد نمط مشابهة لما نتوقع رؤيته في ورقة أنماط خارجية. ثم يتم تطبيق هذه الكائنات على style سمة العناصر الموجودة في العلامات التي تم إرجاعها.
لاحظ أنه يتم استخدام الأقواس المتعرجة عند الإشارة إلى الأنماط بدلاً من علامات الاقتباس التي نستخدمها عادةً في HTML العادي.
استخدم وحدات CSS
وحدات CSS... ماذا حدث لهؤلاء ، أليس كذلك؟ تستفيد من المتغيرات المحددة النطاق محليًا ويمكن استخدامها جنبًا إلى جنب مع React. لكن ما هم ، مرة أخرى ، بالضبط؟
نقلا عن وثائق الريبو:
تعمل وحدات CSS النمطية عن طريق تجميع ملفات CSS الفردية في كل من CSS والبيانات. إخراج CSS طبيعي ، CSS عام ، والذي يمكن حقنه مباشرة في المتصفح أو متسلسلة معًا وكتابتها في ملف للاستخدام الإنتاجي. تُستخدم البيانات لتعيين الأسماء التي يمكن قراءتها بواسطة الإنسان والتي استخدمتها في الملفات إلى CSS الإخراج الآمن عالميًا.
بعبارات أبسط ، تسمح لنا CSS Modules باستخدام نفس اسم الفئة في ملفات متعددة دون اشتباكات حيث يتم إعطاء اسم برمجي فريد لكل اسم فئة. هذا مفيد بشكل خاص في التطبيقات الكبيرة. يتم تحديد نطاق كل اسم فئة محليًا للمكون المحدد الذي يتم استيراده فيه.
تشبه ورقة أنماط CSS Module ورقة الأنماط العادية ، ولكن بامتداد مختلف فقط (على سبيل المثال styles.module.css). إليك كيفية إعدادها:
- قم بإنشاء ملف بامتداد
.module.cssكملحق. - قم باستيراد هذه الوحدة إلى تطبيق React (كما رأينا سابقًا)
- إضافة
classNameإلى عنصر أو مكون والإشارة إلى نمط معين من الأنماط المستوردة.
مثال بسيط للغاية:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;استخدم المكونات المصممة
وقد استخدمته مكونات على غرار؟ إنه شائع جدًا ويسمح لك بإنشاء مكونات مخصصة باستخدام CSS الفعلي في JavaScript. المكون المصمم هو في الأساس مكون React مع - الاستعداد له - الأنماط. تتضمن بعض الميزات أسماء فئات فريدة وتصميم ديناميكي وإدارة أفضل لـ CSS حيث أن لكل مكون أنماطه المنفصلة الخاصة به.
قم بتثبيت حزمة npm ذات المكونات النمطية في سطر الأوامر:
npm install styled-componentsبعد ذلك ، قم باستيراده إلى تطبيق React:
import styled from 'styled-components'أنشئ مكونًا وقم بتعيين خاصية ذات نمط له. لاحظ استخدام القيم الحرفية للقالب التي يتم الإشارة إليها بواسطة backticks في ملف Wrapper موضوع:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;ما سبق Wrapper سيتم عرض المكوِّن على هيئة div يحتوي على تلك الأنماط.
التصميم الشرطي
تتمثل إحدى مزايا المكونات المصممة في أن المكونات نفسها وظيفية ، حيث يمكنك استخدام الدعائم داخل CSS. هذا يفتح الباب أمام العبارات الشرطية والأنماط المتغيرة بناءً على الحالة أو الخاصية.
إليك عرض توضيحي يُظهر ذلك:
هنا ، نحن نتلاعب بعناصر div display الخاصية في حالة العرض. يتم التحكم في هذه الحالة بواسطة زر يقوم بتبديل حالة div عند النقر فوقه. وهذا بدوره يبدل بين أنماط حالتين مختلفتين.
مضمنة if البيانات ، نستخدم أ ? بدلاً من المعتاد if/else بناء الجملة. ال else الجزء بعد الفاصلة المنقوطة. وتذكر دائمًا استدعاء الحالة أو استخدامها بعد تهيئتها. في هذا العرض التوضيحي الأخير ، على سبيل المثال ، يجب أن تكون الدولة أعلى من Wrapper أنماط المكون.
تصميم رد فعل سعيد!
هذا التفاف ، يا رفاق! نظرنا في عدد من الطرق المختلفة لكتابة الأنماط في تطبيق React. وليس الأمر وكأن أحدًا أفضل من البقية ؛ النهج الذي تستخدمه يعتمد على الموقف ، بالطبع. نأمل الآن أن تكون قد فهمتها جيدًا وتعلم أن لديك مجموعة من الأدوات في ترسانة تصميم React الخاصة بك.
