Перейти к содержанию

<style>

Canary

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

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

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

Описание

<style>

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

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

Параметры

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

  • children: строка, обязательна. Содержимое таблицы стилей.
  • precedence: строка. Указывает React, где ранжировать DOM-узел <style> относительно других в документе <head>, который определяет, какая таблица стилей может перекрывать другую. Его значение может быть (в порядке старшинства) " reset", "low", "medium", "high". Таблицы стилей с одинаковым старшинством идут вместе независимо от того, являются ли они тегами <link> или встроенными тегами <style> или загружаются с помощью функций preload или preinit.
  • href: строка. Позволяет React де-дублировать стили, которые имеют одинаковый href.
  • media: строка. Ограничивает таблицу определенным media query.
  • nonce: строка. Криптографический nonce для разрешения ресурса при использовании строгой политики безопасности содержимого.
  • title: строка. Указывает имя альтернативной таблицы стилей.

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

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

Специальное поведение рендеринга

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

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

Этот особый режим имеет две оговорки:

  • React будет игнорировать изменения пропсов после отрисовки стиля. (Если это произойдет, React выдаст предупреждение в процессе разработки).
  • React может оставить стиль в DOM даже после того, как компонент, который его отрисовал, будет размонтирован.

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

Рендеринг встроенной таблицы стилей CSS

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

Если вы укажете параметры href и precedence, ваш компонент приостановится на время загрузки таблицы стилей. (Даже при использовании встроенных таблиц стилей может потребоваться время загрузки из-за шрифтов и изображений, на которые ссылается таблица стилей). Параметр href должен уникально идентифицировать таблицу стилей, потому что React будет удалять дубликаты таблиц стилей с одинаковым href.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { renderToStaticMarkup } from 'react-dom/server';
import formatHTML from './formatHTML.js';

export default function ShowRenderedHTML({ children }) {
    const markup = renderToStaticMarkup(
        <html>
            <head />
            <body>{children}</body>
        </html>
    );
    return (
        <>
            <h1>Rendered HTML:</h1>
            <pre>{formatHTML(markup)}</pre>
        </>
    );
}

Источник — https://react.dev/reference/react-dom/components/style

Комментарии