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

🌐 The built-in browser <style> component lets you add inline CSS stylesheets to your document.

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

参考

🌐 Reference

<style>

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

🌐 To add inline styles to your document, render the built-in browser <style> component. You can render <style> from any component and React will in certain cases place the corresponding DOM element in the document head and de-duplicate identical styles.

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

查看更多示例。

属性

🌐 Props

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

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

不推荐在 React 中使用的属性：

🌐 Props that are not recommended for use with React:

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

特殊渲染行为

🌐 Special rendering behavior

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

🌐 React can move <style> components to the document’s <head>, de-duplicate identical stylesheets, and suspend while the stylesheet is loading.

要选择此行为，请提供 href 和 precedence 属性。如果样式具有相同的 href，React 会去重这些样式。优先属性告诉 React 在文档 <head> 中相对于其他 <style> DOM 节点的位置，这决定了哪个样式表可以覆盖另一个。

🌐 To opt into this behavior, provide the href and precedence props. React will de-duplicate styles if they have the same href. The precedence prop tells React where to rank the <style> DOM node relative to others in the document <head>, which determines which stylesheet can override the other.

这种特殊​​处理有三个注意事项：

🌐 This special treatment comes with three caveats:

  • 在样式被渲染后，React 会忽略对 props 的更改。（如果发生这种情况，React 在开发环境中会发出警告。）
  • 在使用 precedence 属性时，React 会丢弃所有多余的属性（除 href 和 precedence 之外）。
  • 即使渲染样式的组件已被卸载，React 也可能会将样式保留在 DOM 中。

用法

🌐 Usage

渲染内联 CSS 样式表

🌐 Rendering an inline CSS stylesheet

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

🌐 If a component depends on certain CSS styles in order to be displayed correctly, you can render an inline stylesheet within the component.

href 属性应唯一标识样式表，因为 React 会去重具有相同 href 的样式表。如果你提供 precedence 属性，React 会根据这些值在组件树中出现的顺序重新排列内联样式表。

🌐 The href prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same href. If you supply a precedence prop, React will reorder inline stylesheets based on the order these values appear in the component tree.

内联样式表在加载时不会触发 Suspense 边界。即使它们加载像字体或图片这样的异步资源。

🌐 Inline stylesheets will not trigger Suspense boundaries while they’re loading. Even if they load async resources like fonts or images.

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>