استایل نقشی حیاتی در ساخت اپلیکیشن‌های وب جذاب و کاربرپسند دارد. در برنامه‌های React، راه‌های زیادی برای استایل‌دهی به کامپوننت‌ها و المنت‌های UI وجود دارد. در این مقاله قصد داریم تا چندین گزینه محبوب برای این کار را بررسی کنیم که عبارتند از:

• pure CSS
• ماژول‌های CSS
• preprocessorهای CSS
• Tailwind CSS
• کتابخانه‌های CSS-in-JS مانند Styled Components
• کتابخانه‌های کامپوننت‌های pre-built مانند Chakra UI، Material-UI و Bootstrap

ما ویژگی‌های اصلی، مزایا و معایب هر مورد را بررسی می‌کنیم تا درنهایت بتوانیم مناسب‌ترین روش استایل‌دهی برای پروژه‌های React خود را انتخاب کنیم.

استایل‌دهی برنامه‌های React با استفاده از pure CSS

pure CSS شامل نوشتن stylesheetها با استفاده از سینتکس استاندارد CSS و لینک دادن آن‌ها به کامپوننت‌های React است. این رویکرد ساده با پشتیبانی عالی، آن را به یک انتخاب بسیار خوب برای پروژه‌های با مقیاس کوچک تبدیل می‌کند. اما با رشد برنامه، مدیریت آن می‌تواند چالش برانگیز باشد.

مزایا

• توسعه‌دهندگانی که در CSS متخصص هستند می‌توانند به سرعت خود را با این رویکرد وفق دهند.
• pure CSS توسط تمام مرورگرهای مدرن پشتیبانی می‌شود.
• می‌توانیم فایل‌های CSS را توسط مرورگر در حافظه کش ذخیره کرده و در نتیجه زمان بارگذاری صفحه را سریع‌تر کنیم.

معایب

• استایل‌هایی که در CSS تعریف می‌شوند به طور پیش‌فرض به صورت global هستند، که این موضوع می‌تواند منجر به تداخل نام‌گذاری و مشکلات مربوط به آن شود.
• استفاده مجدد از استایل‌ها در کامپوننت‌های برنامه، مستلزم حفظ دستی نام کلاس‌ها و سلکتورها می‌باشد.

مثال

import React from 'react';
import './MyComponent.css';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1 className="title">Hello, World!</h1>
      <p className="description">This is a styled React component.</p>
      <button className="btn">Click Me</button>
    </div>
  );
};

export default MyComponent;

در این مثال، کامپوننتی به نام MyComponentداریم. برای اعمال استایل‌ها با استفاده از pure CSS، یک فایل CSS خارجی به نام MyComponent.cssرا import می‌کنیم. در ادامه فایل CSS را هم داریم:

.my-component {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.description {
  font-size: 16px;
  color: #777;
}

.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

در این فایل CSS، استایل‌هایی را برای کلاس‌های مختلفی که در کامپوننت مورد استفاده قرار گرفته‌اند، تعریف می‌کنیم. کلاس my-componentبه کانتینر div استایل می‌دهد، کلاس titleاستایل‌دهی به heading را انجام می‌دهد، کلاس descriptionپاراگراف و کلاس btnبه باتن استایل می‌دهد.

هنگامی که MyComponentرندر می‌شود، استایل‌های تعریف شده اعمال می‌شوند. Div کانتینیر دارای بک‌گراند خاکستری روشن با padding و border-radius است. heading دارای سایز فونت بزرگ‌تر و رنگ خاکستری تیره می‌باشد، در حالی که پاراگراف سایز فونت کوچک‌تر و رنگ خاکستری روشن دارد. باتن هم رنگ بک‌گراند آبی با متن سفید دارد که در حالت hover به آبی تیره‌تر تبدیل می‌شود.

باید به این نکته توجه داشته باشیم که فایل CSS را به درستی import کنیم و مطمئن شویم که مسیر آن مطابق با ساختار پروژه ما باشد.

استایل‌دهی برنامه‌های React با استفاده از ماژول‌های CSS

هدف ماژول‌های CSS حل مسائل global scope و قابلیت استفاده مجدد از pure CSS است. آن‌ها به ما اجازه می‌دهند تا stylesheetهای ماژولار بنویسیم، که در آن‌ها نام کلاس‌ها به کامپوننت‌های خاصی محدود می‌شوند.

مزایا

• ماژول‌های CSS برای هر کامپوننت class nameهای منحصربه‌فردی راایجاد می‌کنند که این کار از تداخل استایل‌ها جلوگیری می‌کند.
• می‌توانیم استایل‌هایی که در ماژول‌های CSS تعریف می‌کنیم را به بین کامپوننت‌های موجود، به صورت مجدد مورد استفاده قرار دهیم.
• هنگام استفاده از این روش، stylesheetها را import کرده و مستقیماً به کامپوننت‌هایی که از آن‌ها استفاده می‌کنند لینک می‌کنیم.

معایب

• توسعه دهندگان باید سینتکس ماژول‌های CSS و مکانیسم import آن‌ها را یاد بگیرند و درک کنند. این موضوع می‌تواند کمی دشوار و زمان‌بر باشد.
• ادغام ماژول‌های CSS در یک پروژه React اغلب به تنظیمات پیکربندی اضافی نیاز دارد.

مثال

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.myComponent}>
      <h1 className={styles.title}>Hello, World!</h1>
      <p className={styles.description}>This is a styled React component.</p>
      <button className={styles.btn}>Click Me</button>
    </div>
  );
};

export default MyComponent;

در این مثال، ما یک فایل ماژول CSS خارجی به نام MyComponent.module.cssرا import کرده و آن را به آبجکت stylesاختصاص می‌دهیم. آبجکت stylesشامل نگاشت class nameهای CSS به class nameهای منحصر به فرد تولید شده برای کامپوننت است. در ادامه فایل ماژول CSS را هم داریم:

.myComponent {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.description {
  font-size: 16px;
  color: #777;
}

.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

در فایل ماژول CSS، استایل‌ها را همانند CSS معمولی تعریف می‌کنیم، اما به جای استفاده از class nameهای global، از class nameهای local استفاده می‌کنید. این class nameهای local در محدوده کامپوننت قرار می‌گیرند و دارای نام‌های منحصربه‌فردی هستند که در طول فرآیند ساخت، تولید می‌شوند.

هنگامی که MyComponentرندر می‌شود، استایل‌های ماژول CSS با استفاده از class nameهای مربوطه، از آبجکت stylesاعمال می‌شود. کانتینر div، heading، پاراگراف و باتن کامپوننت دارای استایل‌های مربوطه هستند که بر روی آن‌ها اعمال می‌شوند.

باید مطمئن شویم که از ویژگی classNameاستفاده کرده و به class nameهای ماژول CSS از آبجکت stylesدر JSX کامپوننت خود ارجاع دهیم. سیستم ماژول CSS به طور خودکار این class nameها را به class nameهای منحصربه‌فرد تولید شده نگاشت می‌کند و از کپسوله‌سازی استایل و جلوگیری از تداخل class nameها اطمینان حاصل می‌کند.

توجه به این نکته ضروری است که فایل ماژول CSS باید دارای پسوند فایل .module.cssباشد تا ماژول به درستی کار کند.

استایل‌دهی برنامه‌های React با استفاده از preprocessorهای CSS

preprocessor‌های CSS مانند SASS، LESS یا Stylus ویژگی‌های اضافی مانند متغیرها، nesting، mixins و موارد دیگر را ارائه می‌کنند. همینطور بهره‌وری و قابلیت نگه‌داری کدهای CSS را هم افزایش می‌دهند.

مزایا

• SCSS ویژگی‌های قدرتمندی را معرفی می‌کند که نوشتن و مدیریت CSS را ساده می‌کند.
• SCSS امکان ایجاد قطعه کدها با قابلیت استفاده مجدد با استفاده از mixinها و متغیرها را فراهم می‌کند.
• می‌توانیم فایل‌های CSS موجود را به تدریج و بدون ایجاد تغییرات قابل توجهی به SCSS تبدیل کنیم.

معایب

• فایل‌های SCSS قبل از استفاده باید در CSS معمولی کامپایل شوند.
• توسعه دهندگان باید سینتکس SCSS و ویژگی‌های خاص آن را بیاموزند که این موضوع می‌تواند زمان‌بر و هزینه‌بر باشد.

مثال

در ادامه مثالی از نحوه استفاده از Sass برای استایل دادن به کامپوننت React را بررسی خواهیم کرد. ابتدا npm install node-sassیا yarn add node-sassرا اجرا می‌کنیم تا مطمئن شویم که Sass را در پروژه خود نصب کرده‌ایم.

import React from 'react';
import './MyComponent.scss';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1 className="title">Hello, World!</h1>
      <p className="description">This is a styled React component.</p>
      <button className="btn">Click Me</button>
    </div>
  );
};

export default MyComponent;

در این مثال، ما یک فایل SCSS خارجی به نام MyComponent.scssرا import می‌کنیم. توجه به این نکته لازم است که برای فایل‌های Sass پسوند فایل .scssباشد. در ادامه فایل SCSS را داریم:

.my-component {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  text-align: center;

  .title {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
  }

  .description {
    font-size: 16px;
    color: #777;
  }

  .btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: #0056b3;
    }
  }
}

استایل‌دهی برنامه‌های React با استفاده از Tailwind CSS

Tailwind CSS یک فریم‌ورک utility-first برای CSS است که مجموعه گسترده‌ای از کلاس‌های utility از پیش تعریف شده را ارائه می‌دهد. استفاده از این فریم‌ورک باعث توسعه سریع‌تر پروژه می‌شود.

مزایا

• Tailwind CSS مجموعه گسترده‌ای از کلاس‌های utility را ارائه می‌دهد که توسعه سریع UI را امکان‌پذیر می‌کند.
• این فریم‌ورک امکان سفارشی‌سازی را از طریق یک فایل پیکربندی فراهم کرده و یک ظاهر طراحی شده را امکان‌پذیر می‌کند.
• با استفاده از کلاس‌های utility از پیش تعریف شده، می‌توانیم به راحتی یکنواختی استایل را حفظ کنیم.

معایب

• اندازه فایلی که شامل کل فریم‌ورک Tailwind CSS می‌شود می‌تواند منجر به بزرگ‌تر شدن اندازه بسته نرم‌افزاری شود.
• اتکای بیش از حد به کلاس‌های utility ممکن است باعث ایجاد مشکلاتی همانند طولانی شدن غیرضروری کدهای HTML شود.

مثال

ابتدا باید Tailwind CSS را در پروژه خود نصب کنیم. این کار را می‌توانیم با کمک مستندات مربوط به Tailwind CSS انجام دهیم.

import React from 'react';

const MyComponent = () => {
  return (
    <div className="bg-gray-200 p-4 rounded-lg text-center">
      <h1 className="text-2xl text-gray-800 mb-2">Hello, World!</h1>
      <p className="text-base text-gray-600">This is a styled React component.</p>
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Click Me
      </button>
    </div>
  );
};

export default MyComponent;

در این مثال، ما هیچ فایل خارجی CSS یا SCSS را import نمی‌کنیم. در عوض، مستقیماً از کلاس‌های utility تیلویند در JSX کامپوننت استفاده می‌کنیم. کلاس‌های utility، استایل‌های ready-to-use را برای قسمت‌های مختلف کامپوننت ارائه می‌دهند.

کلاس‌های utility مورد استفاده در این مثال (bg-gray-200، p-4، rounded-lg، text-center، text-2xl، text-gray-800، mb-2، text-base، text-gray-600،bg-blue-500، hover:bg-blue-700، text-white، font-bold، py-2، px-4، rounded) رنگ بک‌گراند، padding، border radius، text alignment، text size، text color، marginها، استایل‌های باتن و موارد دیگر را تعیین می‌کنند.

وقتی MyComponentرندر می‌شود، کلاس‌های utility مربوطه از Tailwind CSS به المنت‌های مربوطه اعمال شده و در نتیجه استایل‌های مورد نظر ایجاد می‌شود.

البته باید مطمئن شویم که پروژه ما برای استفاده از Tailwind CSS به درستی پیکربندی شده باشد، از جمله import کردن stylesheetهای ضروری Tailwind CSS و اعمال فرآیند ساخت مورد نیاز، مانند اجرایnpm run buildیا yarn buildبرای تولید فایل CSS آماده برای ساخت.

Tailwind CSS طیف گسترده‌ای از کلاس‌های utility را ارائه می‌کند که می‌توانیم آن‌ها را با هم ترکیب کرده و یک استایل دلخواه برای کامپوننت React خود ایجاد کنیم. برای اطلاعات بیشتر در مورد این کلاس‌ها مطالعه مستندات رسمی Tailwind CSS می‌تواند مفید باشد.

استایل‌دهی برنامه‌های React با استفاده از CSS-in-JS

کتابخانه‌های CSS-in-JS مانند Styled Components به توسعه‌دهندگان اجازه می‌دهد تا کدهای CSS را مستقیماً در کد جاوااسکریپت بنویسند، و به این ترتیب یک رویکرد منحصربه‌فرد برای استایل‌سازی ارائه می‌کنند. Styled Components راهی برای ایجاد استایل‌هایی با قابلیت استفاده مجدد در کامپوننت‌های React ارائه می‌دهد.

مزایا

• با توجه به این که استایل‌ها در کامپوننت‌ها نوشته می‌شوند، در نتیجه سازماندهی کد و قابلیت استفاده مجدد را افزایش می‌دهند.
• کامپوننت‌های استایل، استایل‌سازی داینامیک را بر اساس props یا state فعال می‌کنند.
• می‌توانیم به راحتی تم‌ها را باهم ترکیب کنیم و یک ظاهر طراحی ثابت را در سراسر برنامه داشته باشیم.

معایب

• راه حل‌های CSS-in-JS اغلب به ابزارهای ساخت و وابستگی‌های اضافی نیاز دارند.
• ساخت استایل‌های داینامیک در زمان اجرا می‌تواند بر عملکرد برنامه تأثیر بگذارد.

مثال

ابتدا، با اجرای npm install styled-componentsیا yarn add styled-components، مطمئن می‌شویم که کتابخانه Styled Components را در پروژه خود نصب کرده‌ایم.

import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
`;

const StyledTitle = styled.h1`
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
`;

const StyledDescription = styled.p`
  font-size: 16px;
  color: #777;
`;

const StyledButton = styled.button`
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;

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

const MyComponent = () => {
  return (
    <StyledDiv>
      <StyledTitle>Hello, World!</StyledTitle>
      <StyledDescription>This is a styled React component.</StyledDescription>
      <StyledButton>Click Me</StyledButton>
    </StyledDiv>
  );
};

export default MyComponent;

در این مثال، تابع styledرا از کتابخانه styled-components import می‌کنیم. سپس با اختصاص دادن نتیجه فراخوانی styledبا المنت‌های HTML مورد نظر به متغیرها (StyledDiv، StyledTitle، StyledDescription، StyledButton) styled components را ایجاد می‌کنیم.

در بک‌تیک (`) هر کامپوننت استایل‌دهی شده، CSSهای مختص آن کامپوننت را تعریف می‌کنیم.

هنگامی که MyComponentرندر می‌شود، کامپوننت‌هایی که استایل‌ها به آن‌ها تعلق گرفته است، به جای المنت‌های معمولی HTML مورد استفاده قرار می‌گیرند. استایل‌های تعریف شده در کامپوننت‌های استایل مربوطه، بر روی المنت‌های مربوطه اعمال می‌شوند.

Styled Components این امکان را به ما می‌دهد تا CSS را مستقیماً در کد جاوااسکریپت خود بنویسیم و کپسوله کردن استایل‌ها و ایجاد کامپوننت‌ها با قابلیت استفاده مجدد را آسان می‌کند.

همچنین می‌توانیم props را به Styled Component ارسال کنیم و از آن‌ها برای ایجاد استایل‌های داینامیک در CSS پویا استفاده نماییم.

البته باید مطمئن شویم که تابع styledرا از styled-components import کرده‌ایم و قبل از استفاده از آن‌ها در کامپوننت مورد نظر، Styled Component خود را تعریف کنیم.

علاوه بر این، باید قبل از استفاده از Styled Componentها آن را را در پروژه خود نصب و پیکربندی کنیم.

استایل‌دهی برنامه‌های React با استفاده از Component Libraryها

کتابخانه‌های کامپوننت مانند Chakra UI، Material-UI، و Bootstrap کامپوننت‌های React از پیش ساخته شده و استایل‌دهی شده را به همراه استایل‌های همراه ارائه می‌دهند. این کتابخانه‌ها یک زبان طراحی رابط کاربری منسجم را ارائه می‌دهند.

مزایا

• استفاده از کامپوننت‌های Ready-to-use روند توسعه را سرعت می بخشد.
• کامپوننت‌های یک کتابخانه به یک سیستم طراحی یکپارچه پایبند هستند و در نتیجه باعث ایجاد یک ثبات بصری می‌شوند.
• کتابخانه‌های کامپوننت‌های محبوب دارای APIها و دستورالعمل‌های کاملاً مستند می‌باشند.

معایب

• با این که این کتابخانه‌ها گزینه‌های سفارشی‌سازی را ارائه می‌دهند، اما ممکن است تمامی نیازهای طراحی را برآورده نکنند.
• گنجاندن کل کتابخانه کامپوننت مورد نظر می‌تواند اندازه بسته نرم افزاری را افزایش دهد.

مثال

ابتدا، با اجرای npm install @mui/materialیا yarn add @mui/materialمطمئن می‌شویم که Material-UI را در پروژه خود نصب کرده‌ایم.

import React from 'react';
import { styled } from '@mui/system';
import { Button, Paper, Typography } from '@mui/material';

const StyledPaper = styled(Paper)(({ theme }) => ({
  backgroundColor: '#f2f2f2',
  padding: theme.spacing(2),
  borderRadius: theme.spacing(1),
  textAlign: 'center',
}));

const StyledTitle = styled(Typography)(({ theme }) => ({
  fontSize: 24,
  color: '#333',
  marginBottom: theme.spacing(1),
}));

const StyledDescription = styled(Typography)(({ theme }) => ({
  fontSize: 16,
  color: '#777',
}));

const StyledButton = styled(Button)(({ theme }) => ({
  backgroundColor: '#007bff',
  color: '#fff',
  borderRadius: theme.spacing(1),
  padding: theme.spacing(1, 2),
  transition: 'background-color 0.3s ease',

  '&:hover': {
    backgroundColor: '#0056b3',
  },
}));

const MyComponent = () => {
  return (
    <StyledPaper>
      <StyledTitle variant="h1">Hello, World!</StyledTitle>
      <StyledDescription variant="body1">This is a styled React component.</StyledDescription>
      <StyledButton variant="contained">Click Me</StyledButton>
    </StyledPaper>
  );
};

export default MyComponent;

در این مثال، ما کامپوننت‌های لازم یعنی Button، Paperو Typographyرا از Material-UI و تابع styledرا از @mui/system import می‌کنیم. سپس با استفاده از تابع styled، styled component را ایجاد کرده و نتیجه را به متغیرها (StyledPaper، StyledTitle، StyledDescription،StyledButton) اختصاص می‌دهیم.

در تابعی که بهstyledمنتقل می‌شود، ما CSSها را برای هر styled component با استفاده از آبجکت (theme) Material-UI برای قالب‌بندی یکسان تعریف می‌کنیم.

وقتی MyComponentرندر می‌شود، styled componentها به‌جای کامپوننت‌های معمولی Material-UI استفاده می‌شوند. استایل‌های تعریف شده در کامپوننت‌های استایل مربوطه به المنت‌های مربوطه اعمال خواهند شد.

styled componentها در Material-UI از رویکردی مشابه Styled Components پیروی می‌کنند و این امکان را به ما می‌دهند تا با استفاده از تابع styledو آبجکت تم Material-UI، استایل‌ها را در کامپوننت‌های خود کپسوله کنیم.

البته در ابتدا باید اطمینان حاصل کنیم که کامپوننت‌ها و توابع لازم را از Material-UI وارد import کرده‌ایم و قبل از استفاده از آن‌ها در کامپوننت‌ها، styled componentهای خود را تعریف کنیم.

همچنین به یاد داشته باشیم که Material-UI را قبل از استفاده، در پروژه خود نصب و پیکربندی کنیم.

جمع‌بندی

در این مقاله سعی کردیم تا روش‌های مختلف برای استایل‌دهی به یک برنامه React را باهم بررسی کنیم. طبق مطالبی که یاد گرفتیم، هر گزینه نقاط قوت و ضعف خاص مربوط به خود را دارد و ما می‌توانیم با توجه به نیازهای پروژه‌ای که داریم، هر یک از این موارد را انتخاب کنیم.