API 参考
组件

<style> - This feature is available in the latest Canary

Canary

React 对 <style> 的扩展当前仅在 React Canary 与 experimental 渠道中可用。在 React 的稳定版本中，<style> 仅作为 浏览器内置 HTML 组件 使用。请在 此处了解更多关于 React 发布渠道的信息。

浏览器内置的 <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 会推断其首先发现的 precedence 值为“较低”，而后来发现的 precedence 值为“较高”。许多样式系统使用单个 precedence 值能够很好地工作，因为样式规则是原子的。无论是 <link> 还是内联 <style> 标签，或者使用 preinit 函数加载的样式表，具有相同优先级的将一起处理。
  • href：字符串，允许 React 对 href 相同的样式进行去重。
  • media：字符串，将样式表限制为特定的 媒体查询。
  • nonce：字符串，表示使用严格内容安全策略时允许资源的 加密随机数。
  • title：字符串，用于指定 替代样式表 的名称。

不建议在 React 中使用的属性：

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

特殊的渲染行为

React 可以将 <style> 组件移动到文档的 <head> 中，去重相同的样式表，并在样式表加载时 挂起。

请提供 href 和 precedence 属性以选择此行为。如果样式表具有相同的 href，React 将对样式去重。优先级属性告诉 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>