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

Canary 版本

React 对 <style> 的扩展目前仅在 React 的 Canary 和实验版本中可用。在 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 会推断出它先发现的优先级值“较低”,而它后发现的优先级值“较高”。许多样式系统可以使用单个优先级值正常工作,因为样式规则是原子的。具有相同优先级的样式表会组合在一起,无论它们是 <link> 还是内联 <style> 标签,还是使用preinit 函数加载的。
  • href:字符串。允许 React 删除重复的样式,这些样式具有相同的 href
  • media:字符串。将样式表限制为特定的媒体查询
  • nonce:字符串。在使用严格的内容安全策略时,用于允许资源的加密随机数
  • title:字符串。指定备用样式表的名称。

**不建议**与 React 一起使用的属性

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

特殊渲染行为

React 可以将 <style> 组件移动到文档的 <head> 中,去除重复的样式表,并在样式表加载时暂停

要启用此行为,请提供 hrefprecedence 属性。如果样式表具有相同的 href,React 将会去除重复。precedence 属性告诉 React <style> DOM 节点相对于文档 <head> 中其他节点的优先级,这决定了哪个样式表可以覆盖另一个。

这种特殊处理有两个注意事项

  • 在渲染样式后,React 将忽略对属性的更改。(如果发生这种情况,React 将会在开发中发出警告。)
  • 即使渲染样式的组件已卸载,React 也可能将样式保留在 DOM 中。

用法

渲染内联 CSS 样式表

如果组件依赖于某些 CSS 样式才能正确显示,则可以在组件内渲染内联样式表。

如果你提供了 hrefprecedence 属性,则在样式表加载时,你的组件将会暂停。(即使使用内联样式表,由于样式表引用的字体和图像,也可能会有加载时间。)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>
  );
}