<style>

Встроенный браузерный компонент <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 для разрешения ресурса при использовании строгой политики безопасности контента.
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://react.dev/reference/react-dom/components/style