CSS-in-JS (CSS-in-JS)

ایده CSS-in-JS در React یعنی استایل ها را داخل همان فایل جاوااسکریپت بنویسی. یعنی به جای پریدن بین چند فایل، هم کد کامپوننت را داری، هم استایلش را، مثل یک دفتر که هم تمرین، هم جواب توی همان صفحات است.

CSS-in-JS در React چیست؟

CSS-in-JS یک روش است که در آن استایل ها را با خود جاوااسکریپت می نویسی. این روش کمک می کند استایل هر کامپوننت جدا و امن بماند.

با این روش می توانی کارهای مهمی انجام بدهی:

• نوشتن استایل با جاوااسکریپت، نه فقط فایل CSS جدا.
• داشتن استایل مخصوص هر کامپوننت بدون قاطی شدن.
• استایل پویا بر اساس propها، مثل نوع دکمه.
• جلوگیری از تداخل نام کلاس ها در پروژه های بزرگ.

نکته: در این آموزش از کتابخانه styled-components برای پیاده سازی CSS-in-JS در React استفاده می کنیم.

شروع کار با styled-components

CSS-in-JS بخشی از هسته React نیست. اما با ابزارهایی مثل Vite یا Create React App خیلی راحت نصب می شود. برای شروع باید styled-components را نصب کنی.

در ترمینال پروژه React این دستور را اجرا کن:

npm install styled-components

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

حالا می توانی مستقیم داخل فایل های .jsx استایل بنویسی. انگار کنار هر درس، حاشیه نویسی رنگی خودت را هم اضافه می کنی.

نخستین کامپوننت با CSS-in-JS در React

در styled-components از شیء styled استفاده می کنیم تا یک کامپوننت جدید بسازیم. استایل ها را داخل backtick ها (template literal) می نویسیم.

مثلاً یک هدر ساده به نام MyHeader می سازیم:

import styled from 'styled-components';

const MyHeader = styled.h1`
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
`;

function App() {
  return (
    <>
      <MyHeader>
        Welcome!
      </MyHeader>
    </>
  );
}

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

اینجا MyHeader خودش یک کامپوننت React است. اما استایلش داخل همان کد تعریف شده است. این یعنی CSS-in-JS در React؛ کد و استایل در یک جا، مرتب و جمع وجور.

استفاده از props در styled-components

یکی از جذاب ترین بخش های CSS-in-JS در React، استایل پویا است. می توانی بر اساس props، رنگ و ظاهر را عوض کنی. مثل این که یک دکمه بر اساس نوعش آبی یا خاکستری شود.

در مثال زیر، prop به نام btntype داریم:

import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: ${props => props.btntype === 'primary' ? '#007bff' : '#6c757d'};
  color: white;
  cursor: pointer;
`;

function App() {
  return (
    <div>
      <Button btntype="primary">
        Primary Button
      </Button>
      <br />
      <br />
      <Button>
        Secondary Button
      </Button>
    </div>
  );
}

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

تابع فلشی داخل ${'{'} ... {'}'} مقدار رنگ پس زمینه را بر اساس prop برمی گرداند. اگر نوع primary باشد آبی می شود، وگرنه خاکستری. شبیه این که رنگ دکمه را از تنظیمات بازی انتخاب کنی.

گسترش استایل ها با CSS-in-JS در React

گاهی چند دکمه داری که بیشتر استایلشان مشترک است. در CSS-in-JS در React می توانی یک پایه بسازی و بقیه را از روی آن گسترش دهی.

مثلاً یک دکمه عمومی و دو دکمه ویژه می سازیم:

import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
`;

const PrimaryButton = styled(Button)`
  background-color: #007bff;
`;

const SuccessButton = styled(Button)`
  background-color: #28a745;
`;

function App() {
  return (
    <div>
      <PrimaryButton>
        Primary
      </PrimaryButton>
      <SuccessButton>
        Success
      </SuccessButton>
    </div>
  );
}

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

اینجا PrimaryButton و SuccessButton از Button ارث می برند. فقط رنگ پس زمینه مخصوص خودشان را دارند. مثل یونیفرم یکسان با رنگ شال متفاوت برای هر کلاس.

استایل های محلی در CSS-in-JS در React

در CSS-in-JS در React، کلاس های پشت صحنه به صورت خودکار یکتا می شوند. یعنی مرورگر اسامی عجیب مثل bSOFjJ می بیند، نه Button ساده.

این کار باعث می شود استایل هر کامپوننت در محدوده خودش بماند. دیگر لازم نیست نگران باشی که کلاس .title در صفحه ای دیگر استایل این صفحه را خراب کند.

اگر قبلاً با CSS Modules در React کار کرده باشی، این ایده خیلی شبیه همان محدوده محلی است. فقط این جا همه چیز در دل جاوااسکریپت است.

استایل های global در CSS-in-JS در React

بعضی وقت ها استایل عمومی لازم داری؛ مثلاً همه <h1> ها یک شکل باشند. در CSS-in-JS در React می توانی با createGlobalStyle چنین استایل هایی را تعریف کنی.

در مثال زیر، یک کامپوننت GlobalStyle می سازیم:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  h1 {
    color: white;
    background-color: purple;
    font-family: Arial, sans-serif;
  }

  .myparagraph {
    font-family: courier, monospace;
    color: blue;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>
        Welcome!
      </h1>
      <p className="myparagraph">
        This paragraph is styled with global styles.
      </p>
    </>
  );
}

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

اینجا با رندر شدن GlobalStyle, استایل ها یک بار به صفحه تزریق می شوند. کلاس .myparagraph مثل CSS معمولی است و در همه کامپوننت ها می توانی از آن استفاده کنی.

نکته: برای ترکیب استایل های محلی و سراسری می توانی از استایل دهی با CSS در React و CSS-in-JS در React کنار هم استفاده کنی.

گام به گام تمرین CSS-in-JS در React

برای تمرین CSS-in-JS در React این مراحل را انجام بده:

1. دستور نصب styled-components را در پوشه پروژه اجرا کن.
2. یک فایل ساده مثل App.jsx باز کن و کامپوننت MyHeader را با استایل دلخواه بساز.
3. یک کامپوننت Button ایجاد کن و رنگ را با prop btntype تغییر بده.
4. از روی Button دو کامپوننت جدید با استایل گسترش یافته بساز.
5. در نهایت یک GlobalStyle اضافه کن و استایل عمومی برای تگ ها تعریف کن.

جمع بندی سریع CSS-in-JS در React

• CSS-in-JS در React یعنی استایل و کد کنار هم باشند.
• با styled-components می توانی کامپوننت های استایل دار بسازی.
• استایل ها بر اساس props می توانند پویا و قابل تغییر باشند.
• کلاس ها پشت صحنه یکتا می شوند و تداخلی ندارند.
• با createGlobalStyle استایل های عمومی هم در دسترس هستند.