<style> (Canary) — React 18

Canary

Расширения React для <style> в настоящее время доступны только в каналах React canary и experimental. В стабильных релизах React <style> работает только как встроенный браузерный HTML-компонент встроенный браузерный HTML-компонент. Узнайте больше о каналах выпуска React здесь.

Встроенный браузерный <style> компонент позволяет добавлять инлайновые CSS-стили в ваш документ.

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

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

Справочник

`<style>`

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

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

См. больше примеров ниже.

Свойства

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

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

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

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

Особенности поведения при отрисовке

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

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

Это специальное поведение имеет два оговорённых момента:

React проигнорирует изменения свойств после того, как стиль был отображён. (React выведет предупреждение в режиме разработки, если это произойдёт.)
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>
  );
}

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://18.react.dev/reference/react-dom/components/style

- Данная функция доступна в последней версии Canary