این کتابخانه ابزار هوشمند می تواند نیازهای استایل شما را برطرف کند.
Stitches یک کتابخانه مدرن CSS-in-JS است که روشی قدرتمند و انعطاف پذیر برای استایل دادن به برنامه های React شما ارائه می دهد. این یک رویکرد منحصر به فرد برای یک ظاهر طراحی ارائه می دهد که بهترین بخش های CSS و جاوا اسکریپت را ترکیب می کند و به شما امکان می دهد سبک های پویا را به راحتی ایجاد کنید.
راه اندازی بخیه ها
استایل دادن به برنامه React خود با استفاده از Stitches شبیه به استفاده از کتابخانه styled-components است. با توجه به اینکه Stitches و styled-components هر دو کتابخانه های CSS-in-JS هستند که به شما امکان می دهند استایل ها را در جاوا اسکریپت بنویسید.
قبل از استایل دادن به برنامه React خود، باید کتابخانه Stitches را نصب و راه اندازی کنید. برای نصب کتابخانه با استفاده از npm، دستور زیر را در ترمینال خود اجرا کنید:
npm install @stitches/react
همچنین، می توانید کتابخانه را با استفاده از yarn با این دستور نصب کنید:
yarn add @stitches/react
هنگامی که کتابخانه Stitches را نصب کردید، می توانید استایل کردن برنامه React خود را شروع کنید.
ایجاد اجزای سبک
برای ایجاد کامپوننت‌های استایل‌بندی‌شده، کتابخانه بخیه‌ها یک عملکرد مدل‌دهی شده را ارائه می‌کند. تابع styled به شما امکان می دهد کامپوننت های استایلی ایجاد کنید که سبک های CSS و منطق کامپوننت ها را ترکیب می کند.
تابع styled دو آرگومان می گیرد. اولی یک عنصر HTML/JSX است و دومی یک شی است که حاوی ویژگی های CSS برای استایل دادن به آن است.
در اینجا نحوه ایجاد یک مولفه دکمه استایل با استفاده از تابع styled آورده شده است:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
});
بلوک کد بالا یک جزء Button با رنگ پس زمینه تیره، رنگ متن خاکستری، شعاع حاشیه و مقداری بالشتک ایجاد می کند. توجه داشته باشید که ویژگی های CSS را در camelCase می نویسید نه در kebab-case. این به این دلیل است که camelCase روش رایج تری برای نوشتن ویژگی های CSS در جاوا اسکریپت است.
هنگامی که کامپوننت دکمه استایلد را ایجاد کردید، می توانید آن را به اجزای React خود وارد کرده و از آن استفاده کنید.
مثلا:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button>Click Me</Button>
</>
);
}
export default App;
این مثال از مولفه Button در یک جزء App استفاده می کند. این دکمه، سبک هایی را که به تابع استایل داده شده ارسال کرده اید، می پذیرد و آن را به شکل زیر در می آورد:
تابع styled همچنین به شما امکان می دهد سبک های CSS را با نحوی مشابه با زبان برنامه افزودنی SASS/SCSS در تودرتو قرار دهید. این کار سازماندهی سبک های خود را برای شما آسان تر می کند و کد شما را خواناتر می کند.
در اینجا یک مثال با استفاده از تکنیک سبک های تودرتو آورده شده است:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
});
این کد از سبک های CSS تو در تو و یک کلاس شبه برای هدف قرار دادن مولفه Button استفاده می کند. هنگامی که ماوس را روی دکمه می‌برید، انتخابگر تودرتوی &:hover رنگ پس‌زمینه و متن دکمه را تغییر می‌دهد.
یک ظاهر طراحی با عملکرد CSS
اگر از ایجاد کامپوننت‌های استایل‌دار ناراحت هستید، کتابخانه stitches تابع css را ارائه می‌کند که می‌تواند نام کلاس‌ها را برای استایل دادن به اجزای شما ایجاد کند. تابع css یک شی جاوا اسکریپت با خصوصیات CSS را به عنوان تنها آرگومان خود می گیرد.
در اینجا نحوه استایل کردن اجزای خود با استفاده از تابع css آورده شده است:
import React from "react";
import { css } from "@stitches/react";
const buttonStyle = css({
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
});
function App() {
return (
<>
<button className={buttonStyle()}>Click Me</button>
</>
);
}
export default App;
تابع css استایل های CSS را برای دکمه ایجاد می کند که این کد سپس به متغیر buttonStyle اختصاص می دهد. تابع buttonStyle یک نام کلاس برای استایل های تعریف شده ایجاد می کند، که سپس به prop className جزء دکمه ارسال می شود.
ایجاد سبک های جهانی
با استفاده از کتابخانه stitches، همچنین می توانید با استفاده از تابع globalCss، استایل های جهانی را برای برنامه خود تعریف کنید. تابع globalCss استایل های جهانی را در برنامه React شما ایجاد و اعمال می کند.
پس از تعریف استایل های جهانی خود با استفاده از globalCSS، تابع موجود در مؤلفه برنامه خود را فراخوانی کنید تا استایل ها در برنامه شما اعمال شود.
مثلا:
import React from "react";
import { globalCss } from "@stitches/react";
const globalStyles = globalCss({
body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
function App() {
globalStyles();
return <></>;
}
export default App;
این مثال استایل ها را برای عنصر بدنه با استفاده از تابع globalCss تعریف می کند. تماس، رنگ پس زمینه را روی #f2f2f2 و رنگ متن را روی #333333 تنظیم می کند.
ایجاد سبک های پویا
یکی از قدرتمندترین ویژگی های کتابخانه بخیه ها توانایی آن در ایجاد سبک های پویا است. با کلید variants می‌توانید استایل‌هایی را ایجاد کنید که به props React بستگی دارد. کلید variants یکی از ویژگی های توابع css و styled است. شما می توانید انواع مختلفی از کامپوننت خود را که می خواهید ایجاد کنید.
مثلا:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
fontFamily: "cursive",
border: "none",
variants: {
color: {
black: {
backgroundColor: "#333333",
color: "#e2e2e2",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
},
gray: {
backgroundColor: "#e2e2e2",
color: "#333333",
"&:hover": {
backgroundColor: "#333333",
color: "#e2e2e2",
},
},
},
},
});
این کد یک جزء Button با یک نوع رنگ ایجاد می کند. نوع رنگی به شما امکان می دهد رنگ دکمه را بر اساس یک پایه رنگ تغییر دهید. هنگامی که مؤلفه Button را ایجاد کردید، می توانید از آن در برنامه خود استفاده کنید.
مثلا:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button color="gray">Click Me</Button>
<Button color="black">Click Me</Button>
</>
);
}
export default App;
هنگامی که این برنامه را رندر کردید، دو دکمه در رابط کاربری شما نمایش داده می شود. دکمه ها مانند تصویر زیر خواهند بود.
ایجاد توکن های تم
کتابخانه بخیه‌ها به شما امکان می‌دهد مجموعه‌ای از نشانه‌های طراحی ایجاد کنید که جنبه‌های بصری رابط کاربری شما را تعریف می‌کنند، مانند رنگ‌ها، تایپوگرافی، فاصله‌گذاری و موارد دیگر. این توکن ها به حفظ ثبات کمک می کنند و به روز رسانی سبک های کلی برنامه شما را آسان می کنند.
برای ایجاد این توکن های تم، از تابع createStitches استفاده کنید. تابع createStitches از کتابخانه stitches به شما امکان می دهد کتابخانه را پیکربندی کنید. مطمئن شوید که از تابع createStitches در فایل stitches.config.ts یا فایل stitches.config.js استفاده می کنید.
در اینجا مثالی از نحوه ایجاد یک توکن تم آورده شده است:
import { createStitches } from "@stitches/react";
export const { styled, css } = createStitches({
theme: {
colors: {
gray: "#e2e2e2",
black: "#333333",
},
space: {
1: "5px",
2: "10px",
3: "15px",
},
fontSizes: {
1: "12px",
2: "13px",
3: "15px",
},
},
});
اکنون که نشانه‌های تم خود را تعریف کرده‌اید، می‌توانید از آنها در استایل‌های مؤلفه خود استفاده کنید.
import { styled } from "../stitches.config.js";
export const Button = styled("button", {
padding: "$1 $3",
borderRadius: "12px",
fontSize: "$1",
border: "none",
color: '$black',
backgroundColor: '$gray',
});
بلوک کد بالا از نشانه های رنگی خاکستری $ و مشکی $ برای پس زمینه و رنگ متن دکمه استفاده می کند. همچنین از نشانه های فاصله $1 و $3 برای تنظیم padding دکمه و متغیر اندازه فونت $1 برای تنظیم اندازه قلم دکمه استفاده می کند.
یک ظاهر طراحی کارآمد با بخیه
کتابخانه Stitches یک روش قدرتمند و انعطاف پذیر برای استایل دادن به برنامه های React شما ارائه می دهد. با ویژگی هایی مانند کامپوننت های سبک، سبک های پویا و globalCSS، می توانید به راحتی طرح های پیچیده ایجاد کنید. چه در حال ساخت یک برنامه کوچک یا بزرگ React هستید، بخیه‌ها می‌توانند انتخابی عالی برای یک ظاهر طراحی باشند.
یک جایگزین عالی برای کتابخانه بخیه ها، کتابخانه احساسات است. Emotion یک کتابخانه محبوب CSS-in-JS است که به شما امکان می دهد سبک ها را در جاوا اسکریپت بنویسید. استفاده از آن آسان است و ویژگی های زیادی برای ایجاد سبک های عالی برای برنامه شما ارائه می دهد.