內建瀏覽器 <style> 元件 可讓您將 inline CSS 樣式表新增至您的文件中。

<style>{` p { color: red; } `}</style>

參考

<style>

要將 inline 樣式新增至您的文件，請渲染內建瀏覽器 <style> 元件。您可以從任何元件渲染 <style>，React 會在某些情況下將對應的 DOM 元素放置在文件 head 中，並刪除重複的相同樣式。

<style>{` p { color: red; } `}</style>

請參閱以下更多範例。

屬性

<style> 支援所有 常用元件屬性。

  • children：字串，必填。樣式表的內容。
  • precedence：字串。告訴 React <style> DOM 節點相對於文件中其他 <head> 中的節點的排名，這決定了哪個樣式表可以覆蓋另一個樣式表。React 將推斷它先發現的優先順序值「較低」，而它後發現的優先順序值「較高」。許多樣式系統可以使用單個優先順序值正常工作，因為樣式規則是原子性的。具有相同優先順序的樣式表會放在一起，無論它們是 <link> 還是 inline <style> 標籤，或者使用 preinit 函式載入。
  • href：字串。允許 React 對具有相同 href 的樣式進行重複資料刪除。
  • media：字串。將樣式表限制為 特定的媒體查詢。
  • nonce：字串。使用嚴格的內容安全策略時，允許資源的加密 nonce。
  • title：一個字串。指定替代樣式表的名稱。

不建議與 React 一起使用的屬性

  • blocking：一個字串。如果設為 "render"，則指示瀏覽器在樣式表載入完成之前不要渲染頁面。React 使用 Suspense 提供更細緻的控制。

特殊渲染行為

React 可以將 <style> 元件移動到文件的 <head> 中，移除重複的樣式表，並在樣式表載入時暫停。

要啟用此行為，請提供 href 和 precedence 屬性。如果樣式表具有相同的 href，React 將會移除重複的樣式。precedence 屬性告訴 React <style> DOM 節點相對於文件中其他 <head> 中節點的排名，這決定了哪個樣式表可以覆蓋另一個樣式表。

這種特殊處理方式有兩個注意事項

  • 樣式渲染後，React 將忽略對屬性的更改。（如果發生這種情況，React 將在開發過程中發出警告。）
  • 即使渲染樣式的元件已被卸載，React 仍可能將樣式保留在 DOM 中。

用法 {/* ...svg content ...*/}

渲染內嵌 CSS 樣式表 {/* ...svg content ...*/}

如果元件需要某些 CSS 樣式才能正確顯示，您可以在元件內渲染內嵌樣式表。

如果您提供 href 和 precedence 屬性，則在樣式表載入時，您的元件將會暫停。（即使使用內嵌樣式表，由於樣式表引用的字體和圖像，仍可能會有載入時間。） 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>
  );
}
{/* ...svg and text content ...*/}<script>{/* ...svg and text content ...*/}<title>