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

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

リファレンス

<style>

ドキュメントにインラインスタイルを追加するには、組み込みブラウザの<style>コンポーネントをレンダリングします。<style>は任意のコンポーネントからレンダリングでき、Reactは特定のケースでは対応するDOM要素をドキュメントのheadに配置し、同一のスタイルの重複を削除します。

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

以下の例を参照してください。

プロパティ

<style>は、すべての共通の要素プロパティをサポートします。

  • children: 文字列、必須。スタイルシートの内容。
  • precedence: 文字列。ドキュメントの<head>内の他の要素に対する<style> DOMノードの順位をReactに指示します。これにより、どのスタイルシートが上書きできるかが決まります。Reactは、最初に検出したprecedence値を「低い」、後で検出したprecedence値を「高い」と推測します。多くのスタイルシステムでは、スタイルルールがアトミックであるため、単一のprecedence値を使用して正常に動作できます。同じprecedenceを持つスタイルシートは、<link>タグ、インライン<style>タグ、またはpreinit関数を使用してロードされているかどうかに関係なく、一緒にグループ化されます。
  • href: 文字列。Reactが同じhrefを持つスタイルを重複削除することを可能にします。
  • media: 文字列。スタイルシートを特定のメディアクエリに制限します。
  • nonce: 文字列。厳格なコンテンツセキュリティポリシーを使用する場合にリソースを許可する暗号化nonceです。
  • title: 文字列。 代替スタイルシート の名前を指定します。

Reactでの使用は推奨されませんプロパティ

  • blocking: 文字列。"render"に設定すると、スタイルシートが読み込まれるまでブラウザがページをレンダリングしないように指示します。ReactはSuspenseを使用してより詳細な制御を提供します。

特別なレンダリング動作

Reactは<style>コンポーネントをドキュメントの<head>に移動し、同一のスタイルシートの重複を削除し、スタイルシートの読み込み中に中断することができます。

この動作を有効にするには、hrefプロパティとprecedenceプロパティを指定します。Reactは同じhrefを持つスタイルを重複削除します。precedenceプロパティは、ドキュメントの<head>内の他の<style>DOMノードに対するランク付けをReactに指示し、どのスタイルシートが上書きできるかを決定します。

この特別な処理には2つの注意点があります。

  • スタイルがレンダリングされた後のプロパティの変更は、Reactによって無視されます（開発モードでは、これが発生した場合に警告が表示されます）。
  • レンダリングしたコンポーネントがアンマウントされた後も、スタイルがDOMに残る場合があります。

使用方法

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

コンポーネントが正しく表示されるために特定の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>
  );
}
前へ<script>
次へ<title>