استایل دهی ری‌ اکت

استایل‌دهی یعنی ظاهر دادن به کامپوننت‌ها و صفحات، مثل تنظیم رنگ، اندازه، فونت و سایر ویژگی‌های بصری. در ری‌اکت چند روش برای استایل‌دهی وجود دارد که هرکدام مزایا و کاربردهای خاص خود را دارند.

در ادامه، با این روش‌ها مرحله‌به‌مرحله آشنا می‌شویم و برای هر روش، یک مثال ساده ارائه می‌دهیم تا بهتر درک کنید که چطور از آن‌ها در پروژه‌های خود استفاده کنید.

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

function App() {
  return (
    <div>
      <h1 style={{ color: 'blue', fontSize: '24px' }}>Hello PNLdev!</h1>
      <button style={{ backgroundColor: 'green', color: 'white', padding: '10px' }}>
        Click Here
      </button>
    </div>
  );
}

export default App;

نکته:  برای نوشتن استایل در JSX، از یک شیء جاوااسکریپت استفاده می‌شود که داخل دو آکولاد {{}} قرار می‌گیرد؛ آکولاد اول مربوط به جاوااسکریپت در JSX و دومی مربوط به خود شیء است.

نکته:  در استایل‌دهی JSX، از نام‌های camelCase مثل backgroundColor به جای نام‌های CSS معمولی مثل background-color استفاده می‌شود.

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

مثلاً فرض کنید فایلی به نام styles.css داریم با محتوای زیر:

.title {
  color: blue;
  font-size: 24px;
}

.button {
  background-color: green;
  color: white;
  padding: 10px;
}

حالا توی کامپوننت ری‌اکت، به این شکل از اون استفاده می‌کنیم:

import React from 'react';
import './styles.css'; // وارد کردن فایل CSS

function App() {
  return (
    <div>
      <h1 className="title">Hello PNLdev!</h1>
      <button className="button">Click Here</button>
    </div>
  );
}

export default App;

نکته: در JSX باید از className به‌جای class استفاده کنیم چون class در جاوااسکریپت یک کلمه رزرو شده است.