כולנו מכירים את הדרך הסטנדרטית של קישור גיליון סגנונות אל ה <head> של מסמך HTML, נכון? זו רק אחת מכמה דרכים שבהן אנו מסוגלים לכתוב CSS. אבל איך זה נראה לסגנן דברים באפליקציה של עמוד אחד (SPA), למשל בפרויקט React?
מסתבר שישנן מספר דרכים לעיצוב אפליקציית React. חלקם חופפים לסטיילינג מסורתי, אחרים לא כל כך. אבל בואו נספור את כל הדרכים שבהן אנחנו יכולים לעשות את זה.
ייבוא גיליונות סגנונות חיצוניים
כפי שהשם מרמז, React יכול לייבא קבצי CSS. התהליך דומה לאופן שבו אנו מקשרים קובץ CSS ב-HTML <head>:
- צור קובץ CSS חדש בספריית הפרויקט שלך.
- כתוב CSS.
- ייבא אותו לקובץ React.
כמו זה:
import "./style.css";זה בדרך כלל מופיע בראש הקובץ שבו מתרחשים יבואים אחרים:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;בדוגמה זו, קובץ CSS מיובא לתוך App.js מ /Components/css תיקייה.
כתוב סגנונות מוטבעים
אולי התרגלתם לשמוע שסטיילינג מוטבע לא כל כך נהדר לתחזוקה ומה לא, אבל בהחלט יש מצבים (הנה אחד!) איפה שזה הגיוני. ותחזוקה היא פחות בעיה ב-React, מכיוון שה-CSS לרוב כבר יושב בתוך אותו קובץ בכל מקרה.
זוהי דוגמה סופר פשוטה לסטיילינג מוטבע ב-React:
<div className="main" style={{color:"red"}}>עם זאת, גישה טובה יותר היא להשתמש באובייקטים:
- ראשית, צור אובייקט המכיל סגנונות עבור אלמנטים שונים.
- לאחר מכן הוסף אותו לאלמנט באמצעות ה-
styleתכונה ולאחר מכן בחר את המאפיין לסגנון.
בוא נראה את זה בהקשר:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;דוגמה זו מכילה א styles אובייקט המכיל שני אובייקטים נוספים, אחד עבור .main class והשני עבור קלט טקסט, המכילים כללי סגנון דומים למה שהיינו מצפים לראות בגיליון סגנונות חיצוני. אובייקטים אלה מוחלים לאחר מכן על style תכונה של אלמנטים שנמצאים בסימון המוחזר.
שים לב שסוגריים מסולסלים משמשים בהתייחסות לסגנונות ולא למרכאות שבהן היינו משתמשים בדרך כלל ב-HTML רגיל.
השתמש במודולי CSS
מודולי CSS... מה לעזאזל קרה לאלה, נכון? יש להם את היתרון של משתנים בהיקף מקומי וניתן להשתמש בהם ממש לצד React. אבל מה הם, שוב, בדיוק?
מצטט את התיעוד של ריפו:
מודולי CSS פועלים על ידי קומפילציה של קובצי CSS בודדים גם ל-CSS וגם לנתונים. פלט ה-CSS הוא CSS רגיל, גלובלי, שניתן להזריק ישירות לדפדפן או לשרשר יחד ולכתוב לקובץ לשימוש ייצור. הנתונים משמשים למיפוי השמות הניתנים לקריאה על ידי אדם שבהם השתמשת בקבצים ל-CSS הפלט הבטוח בעולם.
במילים פשוטות יותר, מודולי CSS מאפשרים לנו להשתמש באותו שם מחלקה במספר קבצים ללא התנגשויות מכיוון שלכל שם מחלקה ניתן שם תכנותי ייחודי. זה שימושי במיוחד ביישומים גדולים יותר. כל שם מחלקה מוגדר באופן מקומי לרכיב הספציפי שבו הוא מיובא.
גיליון סגנונות מודול CSS דומה לגיליון סגנונות רגיל, רק עם סיומת שונה (למשל styles.module.css). כך הם מוגדרים:
- צור קובץ עם
.module.cssבתור הרחבה. - ייבא את המודול הזה לאפליקציית React (כמו שראינו קודם לכן)
- הוסף
classNameלרכיב או רכיב ולהתייחס לסגנון המסוים מהסגנונות המיובאים.
דוגמה סופר פשוטה:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;השתמש ברכיבים מעוצבים
השתמשת רכיבים מעוצבים? זה די פופולרי ומאפשר לך לבנות רכיבים מותאמים אישית באמצעות CSS בפועל ב-JavaScript שלך. רכיב בסגנון הוא בעצם רכיב React עם סגנונות - תתכוננו אליו. חלק מהתכונות כוללות שמות מחלקות ייחודיים, סגנון דינמי וניהול טוב יותר של ה-CSS שכן לכל רכיב יש סגנונות נפרדים משלו.
התקן את חבילת styled-components npm בשורת הפקודה:
npm install styled-componentsבשלב הבא, ייבא אותו לאפליקציית React:
import styled from 'styled-components'צור רכיב והקצה לו מאפיין בסגנון. שים לב לשימוש במילולי תבנית המסומנים על ידי סימנים אחוריים ב- Wrapper אובייקט:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;מעל Wrapper הרכיב יעובד כ-div המכיל את הסגנונות הללו.
סטיילינג מותנה
אחד היתרונות של רכיבים מסוגננים הוא שהרכיבים עצמם פונקציונליים, שכן ניתן להשתמש באביזרים בתוך ה-CSS. זה פותח את הדלת להצהרות מותנות וסגנונות משתנים המבוססים על מצב או אביזר.
הנה הדגמה שמראה את זה:
הנה, אנחנו עושים מניפולציות על ה-div display מאפיין במצב התצוגה. מצב זה נשלט על ידי כפתור שמחליף את מצב ה-div בלחיצה. זה, בתורו, מחליף בין הסגנונות של שתי מדינות שונות.
בשורה if הצהרות, אנו משתמשים ב-a ? במקום הרגיל if/else תחביר. ה else החלק הוא אחרי נקודה-פסיק. וזכור תמיד להתקשר או להשתמש במצב לאחר אתחול. בהדגמה האחרונה הזו, למשל, המדינה צריכה להיות מעל ה- Wrapper סגנונות הרכיב.
סטיילינג של React שמח!
זה עטיפה, אנשים! הסתכלנו על קומץ דרכים שונות לכתוב סגנונות באפליקציית React. וזה לא כאילו אחד טוב יותר מהשאר; הגישה שבה אתה משתמש תלויה בסיטואציה, כמובן. אני מקווה שעכשיו הבנתם אותם היטב ותדעו שיש לכם חבורה של כלים בארסנל הסטיילינג שלכם ב-React.
