سبک دادن به برنامه React.js با استفاده از Emotion

کتابخانه Emotion استفاده شما از CSS را در React ساده می کند و برخی ویژگی های نحوی مفید را نیز اضافه می کند.

استایل دادن به یک برنامه React می تواند چالش برانگیز باشد، به خصوص اگر می خواهید استایل های خود را منظم و قابل نگهداری نگه دارید. برای کمک به ساده‌سازی این فرآیند، کتابخانه Emotion یک انتزاع سطح بالاتر در بالای CSS ارائه می‌کند.

عاطفه چیست؟

Emotion کتابخانه ای برای استایل دادن به برنامه های React است که روشی ساده و کارآمد برای مدیریت استایل های شما ارائه می دهد. این به شما امکان می دهد CSS را در جاوا اسکریپت بنویسید و یک API انعطاف پذیر برای استایل دادن به اجزای خود ارائه می دهد.

یکی از مزایای اصلی استفاده از Emotion برای استایل دادن به برنامه React این است که راه کارآمدتری برای مدیریت استایل های شما ارائه می دهد. برای مثال، می‌توانید از نام‌های کلاس یکسان در چندین مؤلفه استفاده کنید، بدون اینکه خطر برخورد نام‌گذاری هنگام کار با CSS/SASS ایجاد شود.

کتابخانه Emotion استایل های شما را فقط برای اجزایی که از آنها استفاده می کنند به جای کل صفحه اعمال می کند. این می تواند به شما کمک کند از تضاد با سایر سبک های صفحه جلوگیری کنید و کد شما را ماژولارتر و قابل استفاده مجدد کند.

نحوه نصب Emotion

برای افزودن کتابخانه Emotion به برنامه React خود، دستور ترمینال زیر را اجرا کنید:

npm install --save @emotion/react

اکنون کتابخانه Emotion باید در پروژه شما نصب شده و آماده استفاده برای استایل دادن به برنامه React باشد.

طراحی با استفاده از Emotion’s css Prop

هنگامی که کتابخانه Emotion را نصب کردید، می توانید از css prop برای استایل دادن به برنامه React خود استفاده کنید. css prop شبیه به style prop است زیرا می توانید استایل ها را به شکل رشته یا اشیاء جاوا اسکریپت معمولی به آن منتقل کنید.

مطلب مرتبط: چرا Go جایگاهی را در فهرست 10 زبان برنامه نویسی برتر TIOBE به دست آورده است

برای استایل دادن به برنامه خود با استفاده از css prop، باید آن را از کتابخانه @emotion/react وارد کنید، سپس استایل های خود را تعریف کنید:

/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';

function App() {
  return (
    <button css={css`
      padding: 0.5rem 1rem;
      border: none;
      font-family: cursive;
      border-radius: 12px;
      color: #333333;
      background-color: inherit;
      margin-block-start: 2rem;
      margin-block-end: 2rem;
    `}>
      Click Me
    </button>
  )
}

export default App;

خط اول کد، /** @jsxImportSource @emotion/react */، نظر خاصی است که باید به فایل JSX اضافه کنید تا نشان دهد که کتابخانه Emotion باید به عنوان پراگما JSX برای آن فایل استفاده شود.

در JSX، پراگما تابعی است که سینتکس JSX را به جاوا اسکریپت معمولی تبدیل می کند. به طور پیش فرض، React از تابع React.createElement به عنوان پراگما JSX استفاده می کند. با این حال، با کامنت @jsxImportSource، می توانید یک عمل متفاوت را مشخص کنید.

در این مورد، @emotion/react pragma به JSX می‌گوید که از تابع jsx از کتابخانه Emotion برای تبدیل کد JSX استفاده کند. با افزودن نظر پراگما به یک فایل JSX، می‌توانید از ویژگی‌های CSS-in-JS کتابخانه Emotion در اجزای خود استفاده کنید.

مولفه دکمه یک دکمه را با یک ظاهر طراحی سفارشی ارائه می کند. در اینجا، css prop یک استایل سفارشی را به عنصر دکمه اضافه می کند.

css prop همچنین از استایل تو در تو پشتیبانی می کند. استایل تودرتو به شما امکان می دهد سبک هایی را بنویسید که درون یکدیگر قرار گرفته اند.

مثلا:

/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';

function App() {
  return (
    <button css={css`
      padding: 0.5rem 1rem;
      border: none;
      font-family: cursive;
      border-radius: 12px;
      color: #333333;
      background-color: inherit;
      margin-block-start: 2rem;
      margin-block-end: 2rem;

      &:hover{
        color: #e2e2e2;
        background-color: #333333;
      }
    `}>
      Click Me
    </button>
  )
}

export default App;

در این مثال، اعلان سبک شناور از ویژگی استایل تو در تو پروپ css استفاده می کند. پس‌زمینه و رنگ فونت در بلوک کد بالا هر زمان که ماوس را روی دکمه نگه دارید تغییر می‌کند.

مطلب مرتبط: 10 نکته برای نوشتن کدهای تمیزتر و بهتر

ارسال آبجکت استایل به css Prop

css prop همچنین سبک های معمولی شی جاوا اسکریپت را می پذیرد. هنگام استایل دادن به چندین مؤلفه، استفاده از سبک های شی به شما امکان می دهد تا از سبک ها در مؤلفه های خود استفاده مجدد کنید.

برای ارسال استایل های آبجکت به css prop، استایل ها را به عنوان یک شی جاوا اسکریپت تعریف کرده و به prop ارسال کنید:

const style = {
    padding: '0.5rem 1rem',
    border: 'none',
    fontFamily: 'cursive',
    borderRadius: '12px',
    color: '#333333',
    backgroundColor: 'inherit',
    marginBlockStart: '2rem',
    marginBlockEnd: '2rem',

    '&:hover': {
      color: '#e2e2e2',
      backgroundColor: '#333333',
    }
}

return (
  <div className="app">
   <button css={ style }>Click Me</button>
  </div>
);

توجه داشته باشید که نام ویژگی های CSS به جای خط تیره، camelCased است. این به این دلیل است که سبک ها به عنوان اشیاء جاوا اسکریپت تعریف می شوند که از قراردادهای نامگذاری camelCase استفاده می کنند.

یک ظاهر طراحی با استفاده از اجزای استایل شده

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

تابع استایل به شما امکان می دهد اجزای استایل دار قابل استفاده مجدد ایجاد کنید. برای استفاده از تابع styled، آن را از کتابخانه emotion/styled وارد کنید.

برای دریافت کتابخانه @emotion/styled در برنامه خود، آن را در پروژه خود نصب خواهید کرد. با اجرای دستور زیر در ترمینال پروژه خود می توانید این کار را انجام دهید:

npm install @emotion/styled

پس از نصب کتابخانه @emotion/styled، تابع styled را وارد کرده و استایل های خود را تعریف کنید:

import styled from "@emotion/styled";

const Button = styled.button({
    padding: '0.5rem 1rem',
    border: 'none',
    fontFamily: 'cursive',
    borderRadius: '12px',
    color: '#333333',
    backgroundColor: 'inherit',
    marginBlockStart: '2rem',
    marginBlockEnd: '2rem',

    '&:hover': {
      color: '#e2e2e2',
      backgroundColor: '#333333',
    }
})

export default Button;

در بلوک کد بالا، یک دکمه کامپوننت استایل داده شده ایجاد می شود. شما می توانید از این دکمه در برنامه React خود مانند سایر اجزای React استفاده کنید.

مطلب مرتبط: 11 قطعه کد C++ برای مشکلات برنامه نویسی روزمره

اینطوری:

import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

export default App;

با رندر کردن مؤلفه برنامه، دکمه ای با سبک های تعریف شده در مؤلفه Button روی صفحه نمایش شما نمایش داده می شود.

تابع styled نیز سبک های رشته ای را می پذیرد. به نظر متفاوت از رویکرد سبک شیء است، اما عملکرد مشابهی دارد.

import styled from "@emotion/styled";

const Button = styled.button`
    padding: 0.5rem 1rem;
    border: none;
    font-family: cursive;
    border-radius: 12px;
    color: #333333;
    background-color: inherit;
    margin-block-start: 2rem;
    margin-block-end: 2rem;

    &:hover {
        color: #e2e2e2;
        background-color: #333333;
    }
`

export default Button;

یک ظاهر طراحی کارآمد با احساس

Emotion یک کتابخانه قدرتمند برای استایل دادن به اجزای React است که روشی ساده و کارآمد برای مدیریت استایل های شما ارائه می دهد. چه مبتدی یا یک توسعه‌دهنده باتجربه باشید، Emotion می‌تواند به ساده‌سازی فرآیند استایل‌سازی اپلیکیشن React شما کمک کند و نگهداری و مقیاس کدتان را آسان‌تر کند.

بنابراین اگر به دنبال راهی کارآمدتر و انعطاف‌پذیرتر برای استایل دادن به اجزای React خود هستید، Emotion را در نظر بگیرید.

Tags: برنامه نويسی توسعه وب سی اس اس واکنش نشان دهند