内置浏览器 <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>
中,去除重复的样式表,并在样式表加载时暂停。
要启用此行为,请提供 href
和 precedence
属性。如果样式表具有相同的 href
,React 将会去除重复。precedence 属性告诉 React <style>
DOM 节点相对于文档 <head>
中其他节点的优先级,这决定了哪个样式表可以覆盖另一个。
这种特殊处理有两个注意事项
- 在渲染样式后,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> ); }