<style>

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

• Справочник
  • <style>
• Использование
  • Отображение встроенной таблицы стилей CSS

Справочник

<style>

Чтобы добавить встроенные стили в документ, отобразите встроенный компонент браузера <style>. Вы можете отображать <style> из любого компонента, и React в определённых случаях поместит соответствующий элемент DOM в заголовок документа и устранит дубликаты идентичных стилей.

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

Другие примеры приведены ниже.

Свойства

<style> поддерживает все общие свойства элементов.

• children: строка, обязательное свойство. Содержимое таблицы стилей.
• precedence: строка. Указывает React, как расположить узел DOM <style> относительно других элементов документа <head>; от этого зависит, какая таблица стилей сможет переопределить другую. React считает, что значения приоритета, обнаруженные раньше, имеют «более низкий» приоритет, а обнаруженные позже — «более высокий». Многие системы стилей могут использовать одно значение приоритета, поскольку правила стилей атомарны. Таблицы стилей с одинаковым приоритетом объединяются, независимо от того, являются ли они <link>, встроенными тегами <style> или загружены с помощью функций preinit.
• href: строка. Позволяет React устранять дубликаты стилей с одинаковым href.
• media: строка. Ограничивает таблицу стилей определённым медиазапросом.
• nonce: строка. Криптографический nonce для разрешения ресурса при использовании строгой политики безопасности содержимого.
• title: строка. Задаёт имя альтернативной таблицы стилей.

Свойства, которые не рекомендуется использовать с React:

• blocking: строка. Если задано значение "render", браузер не будет отображать страницу, пока не загрузится таблица стилей. React предоставляет более точный контроль с помощью Suspense.

Особое поведение при отображении

React может перемещать компоненты <style> в <head> документа, устранять дубликаты идентичных таблиц стилей и приостанавливать рендеринг, пока таблица стилей загружается.

Чтобы включить такое поведение, укажите свойства href и precedence. React устранит дубликаты таблиц стилей с одинаковым href. Свойство precedence указывает React, как расположить узел DOM <style> относительно других элементов документа <head>; от этого зависит, какая таблица стилей сможет переопределить другую.

У такого специального режима есть три ограничения:

• React будет игнорировать изменения свойств после отображения стиля. (В режиме разработки React выдаст предупреждение, если это произойдёт.)
• При использовании свойства precedence React отбросит все лишние свойства (кроме href и precedence).
• React может оставить стиль в DOM даже после размонтирования компонента, который его отобразил.

Использование

Отображение встроенной таблицы стилей CSS

Если для правильного отображения компонента требуются определённые стили CSS, можно добавить встроенную таблицу стилей в компонент.

Свойство href должно уникально идентифицировать таблицу стилей, поскольку React устранит дубликаты таблиц стилей с одинаковым href. Если указать свойство precedence, React будет переупорядочивать встроенные таблицы стилей в соответствии с порядком появления этих значений в дереве компонентов.

Встроенные таблицы стилей не активируют границы Suspense во время загрузки, даже если они загружают асинхронные ресурсы, например шрифты или изображения.

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>
  );
}