Thebuilt-in browser<style> component lets you add inline CSS stylesheets to your document.
<style>{` p { color: red; } `}</style>Reference
<style>
To add inline styles to your document, render thebuilt-in browser<style> component. You can render<style> from any component and React willin certain cases place the corresponding DOM element in the document head and de-duplicate identical styles.
<style>{` p { color: red; } `}</style>Props
<style> supports allcommon 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 usingpreinitfunctions.href: a string. Allows React tode-duplicate styles that have the samehref.media: a string. Restricts the stylesheet to a certainmedia query.nonce: a string. A cryptographicnonce to allow the resource when using a strict Content Security Policy.title: a string. Specifies the name of analternative stylesheet.
Props that arenot 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, andsuspend while the stylesheet is loading.
To opt into this behavior, provide thehref andprecedence props. React will de-duplicate styles if they have the samehref. 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 will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
- React will drop all extraneous props when using the
precedenceprop (beyondhrefandprecedence). - 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.
Thehref prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the samehref.If you supply aprecedence 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.
importShowRenderedHTMLfrom'./ShowRenderedHTML.js';import{useId}from'react';functionPieChart({data,colors}){constid =useId();conststylesheet =colors.map((color,index)=>`#${id} .color-${index}: \{ color: "${color}"; \}`).join();return(<><stylehref={"PieChart-" +JSON.stringify(colors)}precedence="medium">{stylesheet}</style><svgid={id}> …</svg></>);}exportdefaultfunctionApp(){return(<ShowRenderedHTML><PieChartdata="..."colors={['red','green','blue']}/></ShowRenderedHTML>);}