20/02/2025, 18:32 <style> – React
v19
API REFERENCE COMPONENTS
<style>
The built-in browser <style> component lets you add inline CSS
stylesheets to your document.
<style>{` p { color: red; } `}</style>
Reference
<style>
Usage
Rendering an inline CSS stylesheet
Reference
<style>
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
https://react.dev/reference/react-dom/components/style 1/5
20/02/2025, 18:32 <style> – React
<style> supports all common element props.
children : a string, required. The contents of the stylesheet.
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 : a string. Allows React to de-duplicate styles that have the same
href .
media : a string. Restricts the stylesheet to a certain media query.
nonce : a string. A cryptographic nonce to allow the resource when using a
strict Content Security Policy.
title : a string. Specifies the name of an alternative stylesheet.
Props that are not recommended for use with React:
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 can move <style> components to the document’s <head> , de-
duplicate identical stylesheets, and suspend while the stylesheet is loading.
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 will ignore changes to props after the style has been rendered.
(React will issue a warning in development if this happens.)
https://react.dev/reference/react-dom/components/style 2/5
20/02/2025, 18:32 <style> – React
React may leave the style in the DOM even after the component that
rendered it has been unmounted.
Usage
Rendering an inline CSS stylesheet
If a component depends on certain CSS styles in order to be displayed
correctly, you can render an inline stylesheet within the component.
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.
Inline stylesheets will not trigger Suspense boundaries while they’re loading.
Even if they load async resources like fonts or images.
App.js ShowRenderedHTML.js Reset
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="
Show more
https://react.dev/reference/react-dom/components/style 3/5
20/02/2025, 18:32 <style> – React
PREVIOUS
<script>
NEXT
<title>
Copyright © Meta Platforms, Inc
uwu?
Learn React API Reference
Quick Start React APIs
Installation React DOM APIs
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
https://react.dev/reference/react-dom/components/style 4/5
20/02/2025, 18:32 <style> – React
Community More
Code of Conduct Blog
Meet the Team React Native
Docs Contributors Privacy
Acknowledgements Terms
https://react.dev/reference/react-dom/components/style 5/5
