עיצוב ו-CSS

איך אני מוסיף CSS classes לקומפוננטה שלי?

העבר מחרוזת ל-prop className:

render() {
  return <span className="menu navigation-menu">תפריט</span>
}

זה נפוץ ש-CSS classes תלויים ב-props או state של הקומפוננטה:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>תפריט</span>
}

טיפ

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

האם אני יכול לכתוב inline עיצוב?

כן, ראה את התיעוד על עיצוב כאן.

inline עיצוב הוא רע?

CSS classes בדרך כלל טובים יותר לביצועים מאשר inline עיצוב.

מה זה CSS ב-JS?

“CSS ב-JS” מתייחס לתבנית שבה CSS מורכב בעזרת JavaScript במקום להיות מוגדר בקובץ חיצוני.

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

האם אני יכול לעשות אנימציות ב-React?

ניתן להשתמש ב-React להנפשת אנימציות. ראה React Transition Group, React Motion, React Spring, או Framer Motion לדוגמא.