# آموزش استایل‌دهی در JSX و React – کلاس، اینلاین و روش‌های پیشرفته

در JSX روش‌های مختلفی برای استایل‌دهی به کامپوننت‌های React وجود دارد که هر کدام کاربرد و مزایای خاص خود را دارند. در این آموزش، تمام روش‌های رایج استایل‌دهی در React را به همراه مثال‌های عملی بررسی می‌کنیم.

۱. استفاده از className به جای class

در HTML، برای اعمال کلاس CSS از صفت class استفاده می‌کنیم. اما در JSX، این صفت به className تغییر نام داده است. این کار به این دلیل است که class در زبان جاوااسکریپت یک کلمه کلیدی رزرو شده است.

مثال:

// HTML
// <div class="my-class">...</div>

// JSX
<div className="my-class">...</div>

۲. استایل‌دهی اینلاین (Inline CSS) با آبجکت

می‌توان استایل‌های CSS را مستقیماً در JSX با استفاده از ویژگی style اعمال کرد. مقدار style باید یک آبجکت جاوااسکریپت باشد.

نکات مهم:

• نام ویژگی‌ها (CamelCase): تمام نام ویژگی‌های CSS باید به صورت CamelCase نوشته شوند. یعنی اگر نام ویژگی CSS دو بخشی است (مثلاً font-size یا background-color)، حرف اول بخش دوم و تمام حروف بعدی آن باید بزرگ باشند (مثلاً fontSize یا backgroundColor).
• مقادیر: مقادیر ویژگی‌ها باید به صورت رشته (string) باشند، مگر اینکه مقدار عددی باشد و واحدی نداشته باشد (مانند zIndex). برای مقادیر عددی که واحد دارند (مانند fontSize: 30px)، واحد را نیز به صورت رشته بنویسید.

مثال:

// کد بالا به این صورت نوشته می‌شود:
<h1 style={{ fontSize: "30px", color: "red", zIndex: 2 }}>
  این تگ H1 استایل‌دهی شده است
</h1>

استفاده از متغیر برای استایل‌ها

برای خوانایی بهتر و مدیریت آسان‌تر استایل‌ها، می‌توانید آن‌ها را در یک آبجکت جاوااسکریپت ذخیره کرده و سپس آن آبجکت را به style پاس دهید:

function MyComponent() {
  const headingStyles = {
    fontSize: "30px",
    color: "red",
    fontWeight: "bold",
    borderBottom: "2px solid blue"
  };

  return (
    <h1 style={headingStyles}>
      این تگ H1 با استایل‌های ذخیره شده استایل‌دهی شده است
    </h1>
  );
}

شرطی کردن استایل‌ها

در React می‌توانیم استایل‌ها را به صورت داینامیک و شرطی تغییر دهیم.

function MyComponent() {
  const isActive = true

  return (
    <h1
      style={{
        color: isActive ? "green" : "gray",
        fontSize: "24px"
      }}
    >
      وضعیت کاربر
    </h1>
  )
}

✅ این ویژگی یکی از قدرت‌های اصلی JSX برای ایجاد UI پویا است.

۳. استایل‌دهی با فایل‌های CSS معمولی

ساده‌ترین روش، استفاده از فایل‌های CSS جداگانه و import کردن آنها در کامپوننت است.

import "./App.css";
import "./components/Button.css";

function App() {
  return <div className="app-container">محتوا</div>;
}

⚠️ توجه: در این روش، استایل‌های یک فایل CSS در تمام کامپوننت‌های برنامه قابل دسترس هستند و ممکن است تداخل (Conflict) ایجاد کنند. بنابراین توصیه می‌شود از نام‌های کلاس منحصربه‌فرد استفاده کنید.

۴. استایل‌دهی با CSS Modules

CSS Modules راهکاری برای محدودسازی استایل‌ها به همان کامپوننت است و از تداخل نام‌ها جلوگیری می‌کند.

مراحل استفاده:

۱. ایجاد فایل CSS Module:

نام فایل باید به .module.css ختم شود، مانند Button.module.css.

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
}

۲. استفاده در کامپوننت:

import styles from "./Button.module.css";

function Button() {
  return <button className={styles.button}>کلیک کن</button>;
}

✅ استایل‌ها به صورت خودکار اسکوپ (Scoped) می‌شوند و تداخلی ندارند.

۵. استایل‌دهی با Styled Components

Styled Components یک کتابخانه محبوب برای نوشتن CSS درون کامپوننت‌ها با استفاده از تگ‌های برچسب‌گذاری شده (Tagged Templates) است.

npm install styled-components

مثال:

import styled from "styled-components";

const Button = styled.button`
  background-color: #6200ee;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: #3700b3;
  }
`;

const Title = styled.h1`
  font-size: 24px;
  color: #333;
`;

function App() {
  return (
    <div>
      <Title>سلام دنیا!</Title>
      <Button>ورود</Button>
    </div>
  );
}

✅ استایل‌ها اسکوپ شده و قابلیت شرط‌سازی و تغییر تم به راحتی امکان‌پذیر است.

۶. استایل‌دهی با Tailwind CSS

Tailwind CSS یک فریم‌ورک utility-first است که با کلاس‌های آماده، استایل‌دهی را بسیار سریع می‌کند.

نصب و راه‌اندازی:

npm install -D tailwindcss
npx tailwindcss init

استفاده در کامپوننت:

function Card() {
  return (
    <div className="max-w-sm rounded-lg shadow-lg p-6 bg-white">
      <h2 className="text-2xl font-bold text-gray-800">عنوان کارت</h2>
      <p className="text-gray-600 mt-2">توضیحات کارت</p>
      <button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        کلیک کن
      </button>
    </div>
  );
}

✅ سرعت توسعه بالا و استایل‌های یکپارچه در کل پروژه.

مقایسه روش‌های استایل‌دهی در React

نکات طلایی برای استایل‌دهی بهتر

• برای پروژه‌های کوچک: CSS معمولی یا Inline کافی است.
• برای پروژه‌های متوسط: CSS Modules انتخاب مناسبی است.
• برای پروژه‌های بزرگ و تیمی: Styled Components یا Tailwind توصیه می‌شود.
• از متغیرهای CSS برای مدیریت تم‌ها (Light/Dark) استفاده کنید.
• استایل‌های تکراری را در فایل‌های جداگانه نگهداری کنید.

جمع‌بندی

استایل‌دهی در JSX و React با روش‌های متنوعی امکان‌پذیر است. از className ساده و اینلاین CSS گرفته تا CSS Modules، Styled Components و Tailwind CSS، هر کدام برای شرایط خاصی طراحی شده‌اند. انتخاب روش مناسب به اندازه پروژه، نیازهای تیم و تجربه توسعه‌دهندگان بستگی دارد. با یادگیری این روش‌ها، می‌توانید کامپوننت‌های زیبا، واکنش‌گرا و قابل نگهداری بسازید.