استایل دهی با CSS (CSS Styling)

در React چند روش برای استایل دهی با CSS در React داریم. مهم این است که بفهمی هر روش کجا به درد می خورد تا بعداً کدت شلخته نشود.

روش های استایل دهی با CSS در React

در این صفحه سه روش اصلی استایل دهی با CSS در React را می بینی:

• استایل دهی inline؛ یعنی استایل داخل JSX نوشته می شود.
• استفاده از فایل CSS جدا؛ مثل پروژه های معمولی وب.
• استفاده از CSS Modules برای استایل های محلی و ایمن تر.

نکته: هر سه روش استایل دهی با CSS در React درست هستند؛ انتخاب روش بستگی به اندازه پروژه و سلیقه تیم دارد.

استایل دهی inline در React

در استایل دهی inline، استایل را مستقیم روی خود تگ JSX می نویسی. مقدار پراپ style باید یک شیء JavaScript باشد؛ یعنی مجموعه ای از ویژگی و مقدار مثل color و backgroundColor.

مثل این است که روی برگه دفترت، با خودکار قرمز تیتر را پررنگ بنویسی؛ همه چیز همان جا انجام می شود.

const Header = () => {
  return (
    <>
      <h1
        style={{
          color: 'red'
        }}
      >
        Hello Style!
      </h1>
      <p>
        Add a little style!
      </p>
    </>
  );
};

مشاهده در ادیتور

اینجا پراپ style مستقیماً روی <h1> گذاشته شده است. چون داخل JSX هستیم، باید از آکولاد {} برای وارد کردن شیء JavaScript استفاده کنیم.

نکته: در JSX هر وقت خواستی از مقدار JavaScript استفاده کنی، آن را داخل یک جفت آکولاد { } قرار بده.

نام ویژگی ها به صورت camelCase

چون استایل دهی inline در React با شیء JavaScript نوشته می شود، ویژگی هایی که در CSS خط تیره دارند باید camelCase نوشته شوند. camelCase یعنی کلمه دوم با حرف بزرگ شروع شود؛ مثل backgroundColor.

در CSS معمولی می نویسی background-color، اما در React باید بنویسی backgroundColor.

const Header = () => {
  return (
    <>
      <h1
        style={{
          backgroundColor: 'lightblue'
        }}
      >
        Hello Style!
      </h1>
      <p>
        Add a little style!
      </p>
    </>
  );
};

مشاهده در ادیتور

نکته: اگر background-color را همان طور بنویسی، JavaScript آن را نمی فهمد و استایل دهی با CSS در React اجرا نمی شود.

شیء JavaScript برای استایل دهی با CSS در React

برای مرتب تر شدن کد، می توانی استایل ها را در یک متغیر شیء ذخیره کنی. این طوری JSX تمیزتر می شود و می توانی آن استایل را چند جا استفاده کنی.

const Header = () => {
  const myStyle = {
    color: 'white',
    backgroundColor: 'DodgerBlue',
    padding: '10px',
    fontFamily: 'Sans-Serif'
  };

  return (
    <>
      <h1
        style={myStyle}
      >
        Hello Style!
      </h1>
      <p>
        Add a little style!
      </p>
    </>
  );
};

مشاهده در ادیتور

اینجا شیء myStyle همه مشخصات ظاهری را نگه می دارد. بعد با style={myStyle} آن را روی تگ <h1> اعمال می کنیم. مثل این است که یک «قانون لباس» برای تیترها تعریف کرده باشی.

استفاده از فایل CSS جدا در React

روش دوم برای استایل دهی با CSS در React این است که CSS را در یک فایل جدا بنویسی. این کار شبیه سایت های معمولی است و برای پروژه های بزرگ تر تمیزتر می شود.

اول یک فایل CSS می سازیم و بعد آن را در فایل JavaScript یا JSX ایمپورت می کنیم.

نمونه فایل MyStylesheet.css

این یک فایل CSS ساده است که پس زمینه، رنگ متن و فونت را برای کل صفحه تنظیم می کند.

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

مشاهده در ادیتور

فایل را با پسوند .css ذخیره کن؛ مثلاً MyStylesheet.css. اسم مهم نیست؛ فقط پسوند .css باید درست باشد.

ایمپورت کردن فایل CSS در کامپوننت React

حالا این فایل CSS را در فایل React ایمپورت می کنیم. وقتی Webpack یا ابزار سازنده پروژه فایل .css را ببیند، آن را به شکل استایل به صفحه اضافه می کند.

import { createRoot } from 'react-dom/client';
import './MyStylesheet.css';

const Header = () => {
  return (
    <>
      <h1>
        Hello Style!
      </h1>
      <p>
        Add a little style!.
      </p>
    </>
  );
};

createRoot(document.getElementById('root')).render(
  <Header />
);

مشاهده در ادیتور

وقتی import './MyStylesheet.css' را بنویسی، استایل های آن فایل روی محتوایی که رندر می کنی اعمال می شود. این روش برای استایل دهی با CSS در React در سطح کل صفحه خیلی رایج است.

نکته: در بعضی محیط ها استایل های هر فایل می تواند فقط روی بخش خاصی اثر بگذارد؛ ولی ایده اصلی این است که استایل از طریق import به پروژه اضافه می شود.

CSS Modules در React

CSS Modules روشی مخصوص استایل دهی با CSS در React است که کمک می کند کلاس ها تداخل نداشته باشند. یعنی اگر دو کامپوننت کلاس bigred داشته باشند، هرکدام نسخه مخصوص خودشان را می گیرند.

برای ساختن CSS Module، نام فایل را با .module.css تمام می کنیم؛ مثلاً my-style.module.css.

یک فایل CSS Module نمونه

در این مثال یک کلاس bigred ساخته ایم که رنگ متن، فاصله و فونت را تنظیم می کند.

.bigred {
  color: Tomato;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

مشاهده در ادیتور

استفاده از CSS Module در کامپوننت React

برای استفاده از CSS Module، آن را مثل یک شیء ایمپورت می کنیم. بعد کلاس ها را با styles.name روی className قرار می دهیم.

import { createRoot } from 'react-dom/client';
import styles from './my-style.module.css';

const Car = () => {
  return (
    <h1
      className={styles.bigred}
    >
      Hello Car!
    </h1>
  );
};

createRoot(document.getElementById('root')).render(
  <Car />
);

مشاهده در ادیتور

اینجا styles یک شیء است که کلید bigred در آن وجود دارد. مقدار styles.bigred یک نام کلاس یکتا است که مرورگر می بیند؛ پس دیگر نگران تکراری شدن نام کلاس در پروژه نیستی. این یکی از تمیزترین روش های استایل دهی با CSS در React برای پروژه های بزرگ است.

نکته: صفحه بعدی CSS Modules در React را حتماً بخوان تا این موضوع را عمیق تر یاد بگیری.

گام به گام تمرین استایل دهی با CSS در React

برای تمرین استایل دهی با CSS در React این مراحل را انجام بده:

1. یک کامپوننت ساده مثل Header بساز و با استایل دهی inline رنگ آن را عوض کن.
2. یک شیء myStyle تعریف کن و آن را روی چند تگ مختلف استفاده کن.
3. یک فایل MyStylesheet.css بساز و پس زمینه صفحه را تغییر بده.
4. یک فایل my-style.module.css بساز و با CSS Modules روی یک کامپوننت خاص استایل بده.
5. تفاوت رفتار هر روش را روی پروژه کوچک خودت مقایسه کن.

نکته: وقتی پروژه بزرگ شد، معمولاً ترکیبی از فایل CSS، CSS Modules و کمی استایل دهی inline استفاده می شود.

جمع بندی سریع استایل دهی با CSS در React

• استایل دهی با CSS در React می تواند inline، با فایل جدا یا با CSS Modules باشد.
• در inline باید ویژگی ها را به صورت camelCase بنویسی.
• فایل های .css را ایمپورت کن تا روی محتوای React اثر بگذارند.
• CSS Modules برای جلوگیری از تداخل نام کلاس ها عالی هستند.
• برای جزئیات بیشتر به صفحه استایل دهی با CSS در React برگرد.