התאמה אישית של עיצוב Material UI
Headline עם text-align: center) ומצמידים אותו לרכיב דרך className. אותו דבר עושים להגדרת רוחב של 450 פיקסלים לשדות הטקסט.margin לא נקלטה, כנראה כי כבר מוגדר לרכיב עיצוב אחר. הוספת !important מכריחה את ההגדרה שלנו לנצח, ומשתמשים בה רק כשהדריסה לא עובדת בדרך אחרת.makeStyles: הפונקציה מקבלת אובייקט שבו כל מפתח הוא קלאס (למשל checkbox) וכל קלאס הוא אובייקט של מאפייני עיצוב.Math.random: מתחת ל-0.5 מג'נטה, אחרת מארון. זה מדמה עיצוב שתלוי, למשל, ביום בשבוע.makeStyles מחזירה פונקציה, ולא ישירות את הקלאסים. קוראים לה (בהרצאה createClasses) ומקבלים אובייקט classes, בדומה ל-CSS Modules.className={classes.checkbox} ברכיב המתאים. כל רענון מציג צבע אחר.makeStyles, אך כך היא עובדת.makeStyles לפי הצורך בעיצוב קבוע או דינמי.פרקי ההרצאה: התאמה אישית של עיצוב Material UI
תמלול ההרצאה: התאמה אישית של עיצוב Material UI
הטקסט המלא של הדקות הראשונות בהרצאה «התאמה אישית של עיצוב Material UI» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו רוצים לעשות במטריאל UI זה לעצב את הרכיבים שלנו, למרות שכבר יש עיצוב דיפולטי שלהם, אנחנו רוצים להיכנס עם עיצוב יותר ספציפי משלנו.
יש לנו שתי טכניקות לעשות את זה. אנחנו יכולים לעצב את זה ב-CSS אם העיצוב הוא תמיד קבוע, או שאנחנו יכולים לעשות אותו בצורה דינמית כמו שעשינו בעבר.
בואו נראה את שתי השיטות. נניח שאנחנו רוצים להגדיר איזשהו קטע עיצובי, אני רגע אולי אקטין טיפה את הגופן עבור הטייפוגרפיה הזו של ה-Header.
בואו נייצר כאן איזושהי קלאס, נקרא לה Headline כותרת, ונגדיר לו טקסט Align Center. עכשיו אנחנו יכולים לבוא לכותרת הזאת, לטייפוגרפי הזה, וכמו שעשינו לכל דבר רגיל, Class Name וניתן לו Headline.
בואו נשמור, קצת לא רואים שהוא באמצע האמת, אבל תכף נגדיל את זה אולי, אז נוכל לראות, נניח אם אני אגדיר לו כאן וויד 500 רק בשביל לראות שהוא באמת נמצא לי באמצע, והנה הוא באמת באמצע.
ניפטר רגע מהוויד הזה ונגדיר עוד טקסט בוקס עם וויד 450 פיקסלים וניתן אותו לכל הטקסט פילדים האלה. נאם טקסט בוקס וזה מקבל וזה מקבל וזה מקבל ואז כולם אמורים להיות באותו הרוחב שהוא קצת רחב כזה וזה באמת נראה עכשיו באמצע בואו נרווח כל טקסט בוקס נגדיר שהוא טיפה מכיל איזה שהם שוליים מרג'ין בוא נניח שהמרג'ין זה 5 פיקסלים
ננסה לראות אם הוא קולט את זה והוא לא קולט את זה רגע מה אולי צריך עוד רפרש? לא, הוא לא קולט את זה. למה? יכול להיות שיש עיצובים שכבר מוגדרים עבור הרכיבים האלה ואנחנו לא מצליחים לדרוס אותם.
אם אנחנו ממש ממש רוצים לבצע את הדריסה הזאת, אז אנחנו נותנים את הסימן קריאה important של CSS, שזה אומר, תשמע, אני דורס את כל מה שהיה שם, אוקיי? לא משנה מי נתן לך עיצוב אחר, אני דורס לך את העיצוב הזה.
אולי ניתן 5 פיקסלים מלמעלה ומלמטה ו-0 פיקסלים מהצדדים, קצת נראה לי יותר הגיוני, אבל important זה משהו שאם זה לא עובד אני מכריח אותו, מה שנקרא.
אלה היו עיצובים סטטיים. בואו נגדיר עיצוב דינאמי, משהו שהוא כאילו רנדומלי. אז לצורך כך אנחנו צריכים את כל הקונספט שהיה לנו בעבר של אינליין סטיילינג או עיצוב רנדומלי שעשינו אבל במטריאל UI זה טיפה אחרת.
ב-Material UI יש פונקציה שנקראת make styles. היא מקבלת אובייקט שמכיל כל מיני קלאסים שונים שאנחנו רוצים ליצור.
כל קלאס הוא אובייקט בפני עצמו והיא מחזירה לנו פונקציה. משהו קצת מוזר, היא מחזירה לי פונקציה? רגע, מה? מה אני בדיוק אמור לעשות עם הפונקציה שהיא מחזירה לי?
אז קודם כל, איך אני משתמש ב-make styles? make styles מקבלת את האובייקט והאובייקט אני אגדיר איזה קלאסים אני רוצה לייצר ובואו נייצר קלאס עבור ה-checkbox.
אז אני קורא לו פשוט checkbox, אני יכול לקרוא לו בכל שם שאני רוצה. כל קלאס כזה הוא אובייקט שמכיל כל המאפיינים של הקלאס. לדוגמה, בואו ניתן color וזה יהיה רנדומלי כי אני רוצה פה את הקונספט הרנדומלי לעשות כי אם זה לא היה רנדומלי או לא היה תלוי ביום בשבוע אז למה לא להגדיר את זה כאן.