Skip to main content

style

React's extensions to <style> are currently only available in React's canary and experimental channels. In stable releases of React <style> works only as a built-in browser HTML component. Learn more about React's release channels here.

The built-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 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> 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.)
  • 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.

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>
  );
}