עיצוב יישום React עם תפרים

Stitches היא ספריית CSS-in-JS מודרנית המספקת דרך רבת עוצמה וגמישה לסגנון יישומי React שלך. הוא מציע גישה ייחודית לסטיילינג המשלבת את החלקים הטובים ביותר של CSS ו-JavaScript, ומאפשרת לך ליצור סגנונות דינמיים בקלות.

הגדרת תפרים

עיצוב אפליקציית React שלך באמצעות תפרים דומה ל באמצעות ספריית הרכיבים המעוצבים. בהתחשב בכך שתפרים ו רכיבים מעוצבים שתיהן ספריות CSS-in-JS המאפשרות לך לכתוב סגנונות ב-JavaScript.

לפני עיצוב אפליקציית React שלך, עליך להתקין ולהגדיר את ספריית התפרים. כדי להתקין את הספרייה באמצעות npm, הפעל את הפקודה הבאה בטרמינל שלך:

npm install @stitches/react

לחלופין, אתה יכול להתקין את הספרייה באמצעות חוט עם הפקודה הזו:

yarn add @stitches/react

לאחר שהתקנת את ספריית התפרים, תוכל להתחיל לעצב את אפליקציית React שלך.

יצירת רכיבים מעוצבים

כדי ליצור רכיבים מעוצבים, ספריית התפרים מספקת א מְנוּסָח פוּנקצִיָה. הפונקציה המעוצבת מאפשרת ליצור רכיבים מעוצבים המשלבים סגנונות CSS והלוגיקה של רכיבים.

ה מְנוּסָח הפונקציה לוקחת שני ארגומנטים. הראשון הוא אלמנט HTML/JSX, והשני הוא אובייקט שמכיל את מאפייני ה-CSS לסגנון אותו.

כך תוכל ליצור רכיב כפתור מעוצב באמצעות ה מְנוּסָח פוּנקצִיָה:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
});

בלוק הקוד למעלה יוצר א לַחְצָן רכיב עם צבע רקע כהה, צבע טקסט אפור, רדיוס גבול וריפוד מסוים. שימו לב שאתם כותבים את מאפייני ה-CSS ב-camelCase, לא ב-kebab-case. הסיבה לכך היא ש-camelCase היא דרך נפוצה יותר לכתיבת מאפייני CSS ב-JavaScript.

לאחר שיצרת את רכיב הכפתור המעוצב, תוכל לייבא אותו לרכיבי React שלך ולהשתמש בו.

לדוגמה:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
Click Me</Button>
 </>
 );
}
exportdefault App;

דוגמה זו משתמשת ב- לַחְצָן רכיב ב-an אפליקציה רְכִיב. הכפתור יאמץ את הסגנונות שהעברת ל- מְנוּסָח פונקציה, גורם לזה להיראות כך:

ה מְנוּסָח הפונקציה גם מאפשרת לך לקנן סגנונות CSS, עם תחביר דומה ל שפת ההרחבה SASS/SCSS. זה מקל עליך לארגן את הסגנונות שלך ולהפוך את הקוד לקריאה יותר.

הנה דוגמה באמצעות טכניקת הסגנונות המקוננים:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
});

קוד זה משתמש בסגנונות CSS מקוננים ובפסאודו-class כדי למקד את לַחְצָן רְכִיב. כאשר אתה מרחף מעל הלחצן, הבורר המקונן &:לְרַחֵף משנה את צבעי הרקע והטקסט של הכפתור.

סטיילינג עם פונקציית CSS

אם לא נוח לך ליצור רכיבים מעוצבים, ה תפרים הספרייה מציעה את css פונקציה, שיכולה ליצור שמות מחלקות לסגנון הרכיבים שלך. ה css הפונקציה לוקחת אובייקט JavaScript עם מאפייני 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",
 },
});
functionApp() {
return (
 <>
Click Me</button>
 </>
 );
}
exportdefault App;

ה css הפונקציה יוצרת את סגנונות ה-CSS עבור הכפתור שקוד זה מקצה ל- כפתור סגנון מִשְׁתַנֶה. ה כפתור סגנון הפונקציה מייצרת שם מחלקה עבור הסגנונות המוגדרים, אשר מועבר לאחר מכן ל- className אבזר של ה לַחְצָן רְכִיב.

יצירת סגנונות גלובליים

משתמש ב תפרים בספרייה, תוכל גם להגדיר סגנונות גלובליים עבור היישום שלך באמצעות ה globalCss פוּנקצִיָה. הפונקציה globalCss יוצרת ומחילה סגנונות גלובליים על אפליקציית React שלך.

לאחר הגדרת הסגנונות הגלובליים שלך באמצעות globalCSS, קרא לפונקציה שלך אפליקציה רכיב כדי להחיל את הסגנונות על היישום שלך.

לדוגמה:

import React from"react";
import { globalCss } from"@stitches/react";
const globalStyles = globalCss({
 body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
functionApp() {
 globalStyles();
return<>;
}
exportdefault App;

דוגמה זו מגדירה את הסגנונות עבור גוּף אלמנט באמצעות ה globalCss פוּנקצִיָה. השיחה מגדירה את צבע הרקע ל #f2f2f2 וצבע הטקסט ל #333333.

יצירת סגנונות דינמיים

אחת התכונות החזקות יותר של תפרים הספרייה היא היכולת שלה ליצור סגנונות דינמיים. אתה יכול ליצור סגנונות תלויים אביזרי תגובה עם ה גרסאות מַפְתֵחַ. ה גרסאות מפתח הוא מאפיין של שניהם css ו מְנוּסָח פונקציות. אתה יכול ליצור כמה וריאנטים של הרכיב שלך ככל שתרצה.

לדוגמה:

import { styled } from"@stitches/react";
exportconst 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",
 },
 },
 },
 },
});

קוד זה יוצר א לַחְצָן רכיב עם א צֶבַע גִרְסָה אַחֶרֶת. ה צֶבַע גרסה מאפשרת לך לשנות את צבע הכפתור בהתבסס על א צֶבַע לִתְמוֹך. לאחר שיצרת את לַחְצָן רכיב, אתה יכול להשתמש בו ביישום שלך.

לדוגמה:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
"gray">Click Me</Button>
"black">Click Me</Button>
 </>
 );
}
exportdefault App;

לאחר עיבוד יישום זה, שני לחצנים יוצגו בממשק שלך. הכפתורים ייראו כמו בתמונה למטה.

יצירת אסימוני נושא

ה תפרים הספרייה מאפשרת לך ליצור קבוצה של אסימוני עיצוב המגדירים את ההיבטים החזותיים של ממשק המשתמש שלך, כגון צבעים, טיפוגרפיה, מרווחים ועוד. אסימונים אלה עוזרים לשמור על עקביות ולהפוך את עדכון הסגנונות הכלליים של האפליקציה שלך להיראות קל.

כדי ליצור אסימוני נושא אלה, השתמש ב- ליצור תפרים פוּנקצִיָה. ה ליצור תפרים הפונקציה מספריית התפרים מאפשרת לך להגדיר את הספרייה. הקפד להשתמש ב ליצור תפרים לתפקד ב-a stitches.config.ts קובץ או א stitches.config.js קוֹבֶץ.

להלן דוגמה כיצד ליצור אסימון ערכת נושא:

import { createStitches } from"@stitches/react";
exportconst { 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";
exportconst Button = styled("button", {
 padding: "$1 $3",
 borderRadius: "12px",
 fontSize: "$1",
 border: "none",
 color: '$black',
 backgroundColor: '$gray',
});

בלוק הקוד שלמעלה משתמש באסימוני הצבע $ אפור ו $שחור עבור צבע הרקע והטקסט של הכפתור. הוא גם משתמש באסימוני החלל $1 ו $3 כדי להגדיר את הריפוד של הכפתור ואת משתנה גודל הגופן $1 כדי להגדיר את גודל הגופן של הכפתור.

עיצוב יעיל עם תפרים

ספריית התפרים מספקת דרך רבת עוצמה וגמישה לסגנון יישומי React שלך. עם תכונות כמו רכיבים מעוצבים, סגנונות דינמיים ו- globalCSS, אתה יכול ליצור בקלות עיצובים מורכבים. בין אם אתה בונה יישום React קטן או גדול, תפרים יכולים להיות בחירה מצוינת לעיצוב.

אלטרנטיבה מצוינת לספריית התפרים היא ספריית הרגשות. Emotion היא ספריית CSS-in-JS פופולרית המאפשרת לך לכתוב סגנונות ב-JavaScript. זה קל לשימוש ומציע תכונות רבות ליצירת סגנונות נהדרים עבור היישום שלך.