<style>
רכיב הדפדפן המובנה <style> אפשר להוסיף גיליונות סגנונות של CSS מוטבעים למסמך.
<style>{` p { color: red; } `}</style>הפניה
<style>
כדי להוסיף סגנונות מוטבעים למסמך, רנדרו את רכיב הדפדפן המובנה <style>. אפשר לרנדר <style> מכל קומפוננטה ו-React במקרים אישור תמקם את הרכיבים המתאימים למסמך ה-DOM המתאים בתוך זה.
<style>{` p { color: red; } `}</style>אבזרים
<style> תומך בכל מאפייני האלמנט הנפוצים.
children: מחרוזת, חובה. תוכן גיליון הסגנונות.precedence: מחרוזת. אומרת ל-React איך לדרג את<style>DOM node איזה מתנגד בתוך<head>של המסמך, מה שקובע סגנונות יכול לעקוף איזה. הערכים האפשריים (לפי סדר קדימות):"reset","low","medium","high". סגנונות עם קדימות מקובצים יחד בין אם הם תגיות<link>, תגיות inline<style>, או כאלה שנטענו בעזרתpreloadאוpreinit.href: מחרוזת. מאפשרת ל-React למנוע כפילות של סגנונות שיש להם אותוhref.media: מחרוזת. מגבילה את ה-spreadsheet ל-שאילתת מדיה מסוימות.nonce: מחרוזת. nonce קריפטוגרפי שמאפשר את המשאב כשמשתמשים ב-Content Security Policy קשוחה.title: מחרוזת. מציינת שם של גיליון סגנונות חלופי.
אבזרים ש-לא מומלץ להשתמש בהם עם React:
blocking: מחרוזת. אם מוגדר ל-"render", מורה לדפדפן לא לרנדר את העמוד עד שה-stylesheet נטען. React מספקת שליטה מדויקת יותר דרך Suspense.
התנהגות רינדור מיוחדת K_0
React יכולה להזיז רכיבי <style> ל-<head> של המסמכים, מניעת כפילות של stylesheets זהים, ולבצע suspend בזמן שה-stylesheet נטען.
כדי להפעיל את ההתנהגות הזו, ספקו את ה-props href ו-precedence. React תמנע כפילות של סגנונות אם יש להם אותו href. ה-prop precedence אומר ל-React איך לדרג את <style> DOM node ביחס בתוך <head> של המסמך, מה שקובע איזה גיליון סגנונות יכול לעקוף איזה.
לטיפול המיוחד הזה יש שתי הסתייגויות:
- React תתעלם משינויים ב-props אחרי שה-style רונדר. (React תציג אזהרה בזמן פיתוח אם זה קורה.)
- React עשויה להשאיר את הסגנון ב-DOM גם אחרי שהקומפונטה שרנדרה אותו הוסרה.
שימוש
גיליון סגנונות רינדור של CSS מוטבע
אם קומפוננטה תלויה בסגנונות CSS כדי להיות מוצגת נכון, אפשר גיליון סגנונות לרנדר בתוך הקומפוננטה.
אם מספקים href ו-precedence, הקומפוננטה תבצע suspend בזמן שה-stylesheet נטען. (גם עם גיליונות סגנונות מוטבעים, אפשר זמן טעינה בגלל פונטים ותמונות שה-stylesheet מפנה.) ה-href צריך לזהות בצורה ייחודית את גיליון הסגנונות, כי React תמנע כפילות של גיליונות סגנונות עם אותו href.
import ShowRenderedHTML from './ShowRenderedHTML.js'; import { useId } from 'react'; function PieChart({data, colors}) { const id = useId(); const stylesheet = colors.map((color, index) => `#${id} .color-${index}: \{ color: "${color}"; \}` ).join(); return ( <> <style href={"PieChart-" + JSON.stringify(colors)} precedence="medium"> {stylesheet} </style> <svg id={id}> … </svg> </> ); } export default function App() { return ( <ShowRenderedHTML> <PieChart data="..." colors={['red', 'green', 'blue']} /> </ShowRenderedHTML> ); }