❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

Reactإضافة خصائص CSS للمكونات

  • أساليب استخدام CSS في React
  • تحضير مشروع للتطبيق العملي
  • أسلوب Inline Styling في React
  • أسلوب CSS Stylesheets في React
  • أسلوب CSS Modules في React
  • الملف index.css في React

أساليب استخدام CSS في React

هناك 3 أساليب يمكن اتباعها لإضافة خصائص CSS للوسوم في React و هي:

  • Inline Styling
  • CSS Stylesheets
  • CSS Modules

في هذا الدرس ستتعرف على جميع الأساليب التي يمكنك من خلالها تمرير خصائص CSS للوسوم و المكونات.

تحضير مشروع للتطبيق العملي

إفعل الخطوات التالية تباعاً حتى تنشئ مشروع جديد و تطبق فيه الأمثلة كما فعلنا بالضبط:

  1. قم بإنشاء مشروع جديد إسمه demo-app.
  2. بداخل المجلد src تجد ملف إسمه App.js قم بحذف كل الكود الإفتراضي الموجود فيه.
  3. بداخل المجلد src تجد ملف إسمه App.css قم بحذف كل الكود الإفتراضي الموجود فيه.

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

أسلوب Inline Styling في React

يقصد بهذا الأسلوب تمرير خصائص CSS بشكل مباشر للوسوم على النحو التالي.

<tag style={{propertyName: 'value'}} />

سبب وضع الخصائص و قيمها بين {{ }} هو أنه يتم تمريرها للخاصية style بأسلوب JSX على شكل كائن بدلاً من أسلوب CSS التقليدي.

عند تمرير الخصائص بشكل مباشر للوسوم يجب الإلتزام بالقواعد التالية:

  • أسماء الخصائص يجب وضعها بأسلوب Camel Case فمثلاً الخاصية background-color يجب كتابتها backgroundColor.
  • قيم الخصائص فإنه يجب وضعها دائماً بين علامتي تنصيص، فمثلاً القيمة 10px يجب كتابتها '10px'.

في المثال التالي قمنا بإضافة خصائص CSS بشكل مباشر للوسوم.

المثال الأول

/src/App.js 
// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
// للوسوم الموضوعة فيه بشكل مباشر CSS و لاحظ أننا قمنا بتمرير خصائص
function App() {
    return (
        <div style={{backgroundColor: "#F1F1F1", padding: "10px 20px"}}>
            <h1 style={{color: "dodgerblue"}}>CSS Inline Style</h1>
            <p>In this example we used inline styling.</p>
        </div>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;
جرب الكود

في المثال التالي قمنا بتعريف خصائص CSS التي نريد تمريرها للوسوم في كائنات و من بعدها قمنا بتمريرها لها بشكل مباشر.

المثال الثاني

/src/App.js 
// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
// للوسوم الموضوعة فيه بشكل مباشر CSS و لاحظ أننا قمنا بتمرير خصائص
function App() {
    // <div> هنا قمنا بتعريف كائن وضعنا فيه خصائص التصميم التي سنمررها للوسم
    const divStyle = {
        backgroundColor: "#F1F1F1",
        padding: "10px 20px"
    };
    
    // <h1> هنا قمنا بتعريف كائن وضعنا فيه خصائص التصميم التي سنمررها للوسم
    const h1Style = {
       color: "dodgerblue"
    };

    // <h1> و <div> للوسمين h1Style و divStyle لاحظ أننا مررنا الكائنين 
    return (
        <div style={divStyle}>
            <h1 style={h1Style}>CSS Inline Style</h1>
            <p>In this example we used inline styling.</p>
        </div>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;
جرب الكود

أسلوب CSS Stylesheets في React

يقصد بهذا الأسلوب وضع خصائص CSS في ملف إمتداده .css و من ثم تضمينه في الصفحة.

تذكر أنك في حال أردت تمرير كلاس CSS للوسم فعليك استخدام الخاصية className و تمرير إسم الكلاس لها كنص عادي.


في المثال التالي قمنا بتعريف خصائص CSS بداخل الملف App.css.
بعدها قمنا بتضمين ملف التصميم App.css في المكوّن <App>.

مثال

/src/App.css 
.header {
    background-color: #F1F1F1;
    padding: 10px 20px;
}

#title {
    color: dodgerblue;
    font-size: 20px;
    line-height: 32px;
}

p {
    font-size: 15px;
    line-height: 22px;
}
/src/App.js 
// App.css هنا قمنا بتضمين كل ما يحتويه الملف
import './App.css';

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    return (
        <div className="header">
            <h1 id="title">CSS Stylesheet</h1>
            <p>In this example we used a stylesheet for styling.</p>
        </div>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;
جرب الكود

ملف التصميم App.css الذي قمنا بتضمينه في المكوّن <App> سيتم تطبيقه عليه و على أي مكوّن موضوع فيه.
لهذا عليك أن تكون حذراً عند استخدام هذا الأسلوب لأن أي تحديث في ملف التصميم قد يؤثر على محتوى المكونات الأخرى.

أسلوب CSS Modules في React

يقصد بهذا الأسلوب وضع خصائص CSS في ملف إمتداده .module.css و من ثم تضمينه في المكوّن الذي يحتاجه فقط مما يضمن عدم حدوث أي تضارب في أسماء الكلاسات ( Classes ) و المعرّفات ( Ids ) من مكوّن لآخر.

هنا ملف التصميم يجب تضمينه كموديول مع إعطائه إسم ما، و من بعدها يتم التعامل مع محتوياته من خلال الإسم الذي تم إعطاؤه له.


في المثال التالي قمنا بتعريف خصائص CSS بداخل ملف إسمه demo.module.css وضعناه في المجلد src.
بعدها قمنا بتضمين ملف التصميم demo.module.css في المكوّن <App> بإسم styles.

مثال

/src/demo.module.css 
.header {
    background-color: #F1F1F1;
    padding: 10px 20px;
}

#title {
    color: dodgerblue;
    font-size: 20px;
    line-height: 32px;
}
/src/App.js 
// styles بإسم demo.module.css هنا قمنا بتضمين كل ما يحتويه الملف
import styles from './demo.module.css';

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    return (
        <div className={styles.header}>
            <h1 id={styles.title}>CSS Module</h1>
            <p>In this example we used a css module for styling.</p>
        </div>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;
جرب الكود

كيف يتم ترجمة الموديول

في المثال السابق ستقوم React بشكل تلقائي بالتعديل على أسماء المحددات الموضوعة في الموديول demo.module.css بهدف أن تجعلها مختلفة عن أسماء المحددات المستخدمة في الملفات الأخرى لتصبح كما يلي.

.demo_header__FoFyA {
    background-color: #F1F1F1;
    padding: 10px 20px;
}

.demo_header__FoFyA #demo_title__2IdSI {
    color: dodgerblue;
    font-size: 20px;
    line-height: 32px;
}

و عندما يتم إضافة المحددات السابقة في المكوّن <App> فإنه سيتم إضافتها فيه على النحو التالي.

<div class="demo_header__FoFyA">
    <h1 id="demo_title__2IdSI">CSS Module</h1>
    <p>In this example we used a css module for styling.</p>
</div>

الملف index.css في React

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

عادةً ما يقوم المطورون بوضع كود التصفير العام ( Global CSS Reset ) فيه على النحو التالي حتى يتم تطبيقه على جميع العناصر التي يتم عرضها في واجهة المستخدم.

مثال

/src/index.css 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

خصائص التصميم التي يتم وضعها في الملف index.css يتم تطبيقها على جميع مكونات المشروع و يمكن إعادة تعريفها في المكوّن لتتناسب مع المحتوى الذي سيتم عرضه فيه.