ブラウザ組み込みの <style> コンポーネントを利用することで、ドキュメントにインラインの CSS スタイルシートを追加できます。

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

リファレンス

<style>

ドキュメントにインラインスタイルを追加するためには、ブラウザ組み込みの <style> コンポーネントをレンダーします。任意のコンポーネントから <style> をレンダーでき、React は特定の場合に対応する DOM 要素をドキュメントの head に配置し、同一のスタイルの重複解消処理を行います。

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

さらに例を見る

props

<style> は、一般的な要素の props をすべてサポートしています。

  • children: 文字列、必須。スタイルシートの内容です。
  • precedence: 文字列。React がドキュメントの <head> 内で <style> DOM ノードを他と比較してどのように順序付けるかを指定します。これによりどのスタイルシートが他を上書きできるかが決まります。React は、最初に見つけた優先順位の値を「低い」と見なし、後で見つけた優先順位の値を「高い」と見なします。多くのスタイルシステムは、スタイルルールがアトミックであるため、単一の優先順位の値を使用しても問題なく機能します。同じ優先順位を持つスタイルシートは、<link> の場合でもインライン <style> タグの場合でも、あるいは preinit 関数を使用してロードされた場合でも、一緒に配置されます。
  • href: 文字列。同じ href を持つスタイルに対して React が重複解消処理を行えるようにします。
  • media: 文字列。スタイルシートの適用を特定のメディアクエリに制限します。
  • nonce: 文字列。厳格なコンテンツセキュリティポリシーを使用する際にリソースを許可するための暗号化 nonce。
  • title: 文字列。代替スタイルシートの名前を指定します。

以下は React での使用が推奨されない props です。

  • blocking: 文字列。"render" と設定されている場合、スタイルシートがロードされるまでページを描画しないようブラウザに指示します。React ではサスペンスを通じてより細かい制御を提供します。

特別なレンダー動作

React は <style> コンポーネントをドキュメントの <head> に移動し、同一のスタイルシートの重複解消処理を行い、スタイルシートがロードされている間にサスペンドします。

この動作を有効にするには、props として href と precedence を指定してください。React は同じ href を持つスタイルの重複解消処理を行います。precedence はドキュメントの <head> 内における他の <style> DOM ノードとの相対ランクを React に指示することで、どのスタイルシートが他を上書きできるかを決定できるようにします。

この特別な動作に関して、以下の 2 つの注意点があります。

  • スタイルがレンダーされた後、React は props に変更があってもそれを無視します（開発中にこれが起きた場合は React が警告を発します）。
  • コンポーネントがアンマウントされた後も、React は DOM にスタイルを残すことがあります。

使用法

インライン CSS スタイルシートのレンダー

コンポーネントが正しく表示されるために特定の CSS スタイルに依存している場合、インラインスタイルシートを当該コンポーネント内でレンダーできます。

props である href は、このスタイルシートを一意に識別する必要があります。React は同じ href を持つスタイルシートに対して重複解消処理を行うからです。 props として precedence を与えた場合、React は各々の値がコンポーネントツリーに現れた順番を基準にして、インラインのスタイルシートを並び替えます。

インラインのスタイルシートはロード中にサスペンスバウンダリをトリガしません。 これは内部でフォントや画像などのリソースを非同期的に読み込んでいる場合でも同様です。

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>
  );
}
Previous<script>
Next<title>