<style>
רכיב הדפדפן המובנה <style> מאפשר להוסיף stylesheets של CSS inline למסמך.
<style>{` p { color: red; } `}</style>Reference
<style>
כדי להוסיף inline styles למסמך, רנדרו את רכיב הדפדפן המובנה <style>. אפשר לרנדר <style> מכל קומפוננטה ו-React במקרים מסוימים תמקם את אלמנט ה-DOM המתאים בתוך ה-document head ותמנע כפילות של סגנונות זהים.
<style>{` p { color: red; } `}</style>Props
<style> תומך בכל מאפייני האלמנט הנפוצים.
children: מחרוזת, חובה. תוכן ה-stylesheet.precedence: מחרוזת. אומרת ל-React איך לדרג את<style>DOM node ביחס לאחרים בתוך<head>של המסמך, מה שקובע איזה stylesheet יכול לעקוף איזה. הערכים האפשריים (לפי סדר קדימות):"reset","low","medium","high". stylesheets עם אותה קדימות מקובצים יחד בין אם הם תגיות<link>, תגיות inline<style>, או כאלה שנטענו בעזרתpreloadאוpreinit.href: מחרוזת. מאפשרת ל-React למנוע כפילות של סגנונות שיש להם אותוhref.media: מחרוזת. מגבילה את ה-spreadsheet ל-media query מסוים.nonce: מחרוזת. nonce קריפטוגרפי שמאפשר את המשאב כשמשתמשים ב-Content Security Policy קשוחה.title: מחרוזת. מציינת שם של stylesheet חלופי.
Props ש-לא מומלץ להשתמש בהם עם React:
blocking: מחרוזת. אם מוגדר ל-"render", מורה לדפדפן לא לרנדר את העמוד עד שה-stylesheet נטען. React מספקת שליטה מדויקת יותר דרך Suspense.
התנהגות רינדור מיוחדת
React יכולה להזיז רכיבי <style> ל-<head> של המסמך, למנוע כפילות של stylesheets זהים, ולבצע suspend בזמן שה-stylesheet נטען.
כדי להפעיל את ההתנהגות הזו, ספקו את ה-props href ו-precedence. React תמנע כפילות של סגנונות אם יש להם אותו href. ה-prop precedence אומר ל-React איך לדרג את <style> DOM node ביחס לאחרים בתוך <head> של המסמך, מה שקובע איזה stylesheet יכול לעקוף איזה.
לטיפול המיוחד הזה יש שתי הסתייגויות:
- React תתעלם משינויים ב-props אחרי שה-style רונדר. (React תציג אזהרה בזמן פיתוח אם זה קורה.)
- React עשויה להשאיר את ה-style ב-DOM גם אחרי שהקומפוננטה שרנדרה אותו הוסרה.
שימוש
רינדור stylesheet של CSS inline
אם קומפוננטה תלויה בסגנונות CSS מסוימים כדי להיות מוצגת נכון, אפשר לרנדר stylesheet inline בתוך הקומפוננטה.
אם מספקים href ו-precedence, הקומפוננטה תבצע suspend בזמן שה-stylesheet נטען. (גם עם stylesheets inline, ייתכן זמן טעינה בגלל פונטים ותמונות שה-stylesheet מפנה אליהם.) ה-href צריך לזהות בצורה ייחודית את ה-stylesheet, כי React תמנע כפילות של stylesheets עם אותו 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> ); }