内置浏览器<style>组件允许您向文档添加内联 CSS 样式表。

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

参考

<style>

要向您的文档添加内联样式，请渲染内置浏览器 <style>组件。您可以从任何组件渲染<style>，React 将在某些情况下将相应的 DOM 元素放置在文档头部并对重复的样式进行去重。

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

请参见下面的更多示例。

属性

<style> 支持所有常用的元素属性。

  • children：字符串，必填。样式表的内容。
  • precedence：字符串。告诉 React 如何在文档 <head> 中对 <style> DOM 节点进行排序，这决定了哪个样式表可以覆盖另一个。React 将推断它首先发现的优先级值是“较低”的，而它后来发现的优先级值是“较高”的。许多样式系统可以使用单个优先级值正常工作，因为样式规则是原子的。具有相同优先级的样式表放在一起，无论它们是 <link> 还是内联 <style> 标签，或者使用 preinit 函数加载。
  • href：字符串。允许 React 对具有相同 href 的样式进行去重。
  • media：字符串。将样式表限制在特定的媒体查询。
  • nonce：字符串。使用严格的内容安全策略时，允许访问资源的加密nonce。
  • title：字符串。指定备用样式表的名称。

不建议在 React 中使用的属性

  • blocking：字符串。如果设置为"render"，则指示浏览器在样式表加载完成之前不要渲染页面。React 使用 Suspense 提供更细粒度的控制。

特殊的渲染行为

React 可以将<style>组件移动到文档的<head>中，消除重复的样式表，并在样式表加载期间暂停。

要启用此行为，请提供href和precedence属性。如果样式表具有相同的href，React 将消除重复的样式。precedence 属性告诉 React 如何在文档<head>中对<style> DOM 节点进行排序，这决定了哪个样式表可以覆盖另一个样式表。

这种特殊处理有两个需要注意的地方

  • 样式渲染后，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>
  );
}
上一页<script>
下一页<title>