component in React, which allows for the addition of inline CSS stylesheets to a document. It details the usage, props, and special rendering behaviors of the
[go: up one dir, main page]
Scribd
Upload
6 views5 pages

_style_ – React

The document provides an overview of the built-in <style> component in React, which allows for the addition of inline CSS stylesheets to a document. It details the usage, props, and special rendering behaviors of the <style> component, including how React handles style deduplication and precedence. Additionally, it emphasizes the importance of the href and precedence props for managing styles effectively within React components.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views5 pages

_style_ – React

The document provides an overview of the built-in <style> component in React, which allows for the addition of inline CSS stylesheets to a document. It details the usage, props, and special rendering behaviors of the <style> component, including how React handles style deduplication and precedence. Additionally, it emphasizes the importance of the href and precedence props for managing styles effectively within React components.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like