ספריית Emotion מפשטת את השימוש שלך ב-CSS ב-React ומוסיפה גם כמה תכונות תחביר שימושיות.

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

מה זה רגש?

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

אחד היתרונות העיקריים של שימוש ב-Emotion לסגנון אפליקציית React שלך הוא שהיא מספקת דרך יעילה יותר לנהל את הסגנונות שלך. לדוגמה, אתה יכול להשתמש בשמות מחלקות זהים במספר רכיבים ללא סיכון של התנגשויות שמות שיתעוררו בעבודה עם CSS/SASS.

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

כיצד להתקין רגש

כדי להוסיף את ספריית הרגשות לאפליקציית React שלך, הפעל את פקודת המסוף הבאה:

npm install --save @emotion/react

ספריית Emotion אמורה להיות מותקנת כעת בפרויקט שלך ומוכנה לשימוש לסגנון אפליקציית React שלך.

instagram viewer

סטיילינג באמצעות css Prop

לאחר התקנת ספריית Emotion, תוכל להשתמש ב- css אביזר לסגנון אפליקציית React שלך. ה css prop דומה ל-proper style שכן ניתן להעביר אליו סגנונות בצורה של מחרוזות או אובייקטי JavaScript רגילים.

כדי לעצב את האפליקציה שלך באמצעות ה css prop, עליך לייבא אותו מה- @רגש/תגובה ספרייה, ולאחר מכן הגדר את הסגנונות שלך:

/** @jsxImportSource @רֶגֶשׁ/react */
יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא {css} מ'@emotion/react';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
 ריפוד: 0.5rem 1rem;
 גבול: אין;
 font-family: cursive;
 רדיוס הגבול: 12px;
 צבע: #333333;
 רקע-צבע: inherit;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 לחץ עלי
 </button>
 )
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

שורת הקוד הראשונה, /** @jsxImportSource @emotion/react */, היא הערה מסוימת שעליכם להוסיף לקובץ JSX כדי לציין שיש להשתמש בספריית Emotion כפרגמת JSX עבור קובץ זה.

ב-JSX, פרגמה היא פונקציה שהופכת את תחביר JSX ל-JavaScript רגיל. כברירת מחדל, React משתמש ב- React.createElement לתפקד כפרגמת JSX. עם זאת, עם ה @jsxImportSource הערה, אתה יכול לציין פרגמה אחרת.

במקרה זה, ה @רגש/תגובה פרגמה אומרת ל-JSX להשתמש ב- jsx פונקציה מספריית הרגשות כדי להפוך את קוד JSX. על ידי הוספת הערת הפרגמה לקובץ JSX, אתה יכול להשתמש בתכונות CSS-in-JS של ספריית Emotion ברכיבים שלך.

רכיב הכפתורים יוצר כפתור עם סגנון מותאם אישית מסוים. הנה ה css prop מוסיף את הסגנון המותאם אישית לאלמנט הכפתור.

ה css prop תומך גם בעיצוב מקונן. עיצוב מקונן מאפשר לך לכתוב סגנונות המקוננים זה בזה.

לדוגמה:

/** @jsxImportSource @רֶגֶשׁ/react */
יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא {css} מ'@emotion/react';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
 ריפוד: 0.5rem 1rem;
 גבול: אין;
 font-family: cursive;
 רדיוס הגבול: 12px;
 צבע: #333333;
 רקע-צבע: inherit;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:לְרַחֵף{
 צבע: #e2e2e2;
 צבע רקע: #333333;
 }
`}>
 לחץ עלי
 </button>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

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

העברת סגנונות אובייקט ל-CSS Prop

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

כדי להעביר סגנונות אובייקט ל- css prop, הגדירו את הסגנונות כאובייקט JavaScript והעבירו אותו ל-prop:

const סגנון = {
 ריפוד: '0.5rem 1rem',
 גבול: 'אף אחד',
 משפחת גופן: 'רָהוּט',
 borderRadius: '12px',
 צֶבַע: '#333333',
 צבע רקע: 'לָרֶשֶׁת',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:לְרַחֵף': {
 צֶבַע: '#e2e2e2',
 צבע רקע: '#333333',
 }
}
לַחֲזוֹר (
"אפליקציה">

שים לב ששמות מאפייני ה-CSS הם camelCased במקום מקופים. הסיבה לכך היא שהסגנונות מוגדרים כאובייקטי JavaScript, המשתמשים במוסכמות השמות של camelCase.

סטיילינג באמצעות הרכיבים המעוצבים

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

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

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

npm להתקין את @emotion/styled

לאחר התקנת ה @רגש/סטייל ספרייה, לייבא את מְנוּסָח לתפקד ולהגדיר את הסגנונות שלך:

יְבוּא מְנוּסָח מ"@emotion/סטייל";
const Button = styled.button({
 ריפוד: '0.5rem 1rem',
 גבול: 'אף אחד',
 משפחת גופן: 'רָהוּט',
 borderRadius: '12px',
 צֶבַע: '#333333',
 צבע רקע: 'לָרֶשֶׁת',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',


'&:לְרַחֵף': {
 צֶבַע: '#e2e2e2',
 צבע רקע: '#333333',
 }
})
יְצוּאבְּרִירַת מֶחדָל לַחְצָן;

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

ככה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא לַחְצָן מ'./לַחְצָן';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (








יְצוּאבְּרִירַת מֶחדָל אפליקציה;

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

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

יְבוּא מְנוּסָח מ"@emotion/סטייל";
const כפתור = styled.button`
 ריפוד: 0.5rem 1rem;
 גבול: אין;
 font-family: cursive;
 רדיוס הגבול: 12px;
 צבע: #333333;
 רקע-צבע: inherit;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:hover {
 צבע: #e2e2e2;
 צבע רקע: #333333;
 }
`
יְצוּאבְּרִירַת מֶחדָל לַחְצָן;

סטיילינג יעיל עם רגש

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

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