<style>

内置浏览器 <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>

请参阅下面的更多示例。

¥See more examples below.

属性

¥Props

<style> 支持所有普通元素属性。

¥<style> supports all common element props.

children：一个字符串，必需。样式表的内容。

¥children: a string, required. The contents of the stylesheet.
precedence：一个字符串。告诉 React 相对于文档 <head> 中的其他 DOM 节点对 <style> DOM 节点进行排名，这决定了哪个样式表可以覆盖另一个样式表。React 将推断它首先发现的优先级值为 “lower”，而它稍后发现的优先级值为 “higher”。由于样式规则是原子的，因此许多样式系统可以使用单个优先级值正常工作。具有相同优先级的样式表可以组合在一起，无论它们是 <link> 还是内联 <style> 标签，还是使用 preinit 函数加载。

¥precedence: a string. Tells React where to rank the <style> DOM node relative to others in the document <head>, which determines which stylesheet can override the other. React will infer that precedence values it discovers first are “lower” and precedence values it discovers later are “higher”. Many style systems can work fine using a single precedence value because style rules are atomic. Stylesheets with the same precedence go together whether they are <link> or inline <style> tags or loaded using preinit functions.
href：一个字符串。允许对具有相同 href 的去重复样式做出反应。

¥href: a string. Allows React to de-duplicate styles that have the same href.
media：一个字符串。将样式表限制为某个媒体查询。

¥media: a string. Restricts the stylesheet to a certain media query.
nonce：一个字符串。使用严格的内容安全策略时的加密允许资源的随机数。

¥nonce: a string. A cryptographic nonce to allow the resource when using a strict Content Security Policy.
title：一个字符串。指定替代样式表的名称。

¥title: a string. Specifies the name of an alternative stylesheet.

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

¥Props that are not recommended for use with React:

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

¥blocking: a string. If set to "render", instructs the browser not to render the page until the stylesheet is loaded. React provides more fine-grained control using Suspense.

特殊渲染行为

¥Special rendering behavior

React 可以在加载样式表时将 <style> 组件移动到文档的 <head>、删除重复的相同样式表和 suspend。

¥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> 中的其他 DOM 节点对 <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 two caveats:

React 将忽略样式渲染后对属性的更改。（如果发生这种情况，React 将在开发中发出警告。）

¥React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
即使渲染样式的组件已被卸载，React 也可能会将样式保留在 DOM 中。

¥React may leave the style in the DOM even after the component that rendered it has been unmounted.

用法

¥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 和 precedence 属性，则你的组件将在加载样式表时挂起。（即使使用内联样式表，由于样式表引用的字体和图片，也可能会存在加载时间。）href 属性应该唯一标识样式表，因为 React 会删除具有相同 href 的样式表的重复项。

¥If you supply an href and precedence prop, your component will suspend while the stylesheet is loading. (Even with inline stylesheets, there may be a loading time due to fonts and images that the stylesheet refers to.) The href prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same 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>