מבוא

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

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

רכיבי עיצוב ב-React

אולי אתה כבר מודע לדרך הרגילה לסגנן רכיבי React באמצעות תכונת classname בשילוב עם גיליון סגנונות חיצוני:

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) } 

jsx

 paragraph-text{ font-weight: bold; color: beige; } 

CSS

סגנונות מוטבעים

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

 function MyComponent(){ return Inline Styled Component } 

שימו לב שלערך ריפוד אין יחידה כי React מוסיף א 'px סיומת לכמה מאפייני סגנון מספריים. במקרים שבהם אתה צריך להשתמש ביחידות אחרות, כגון 'em' או 'rem', ציין במפורש את היחידה עם הערך כמחרוזת. החלת זה על מאפיין הריפוד צריך להיות ריפוד: '1.5em' .

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

שפר את יכולת הקריאה

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

 const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } 

jsx

בניית רכיב כרטיס

בואו נבנה את רכיב כרטיס המשתמש.

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> } 

כלל אצבע

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

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

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