From 45da651bf877b3baf4bbbf05578a6d74f8ada5de Mon Sep 17 00:00:00 2001 From: Eric Cote Date: Sun, 20 Oct 2024 10:46:33 -0400 Subject: [PATCH 1/2] Fix stylesheet precedence example --- src/content/reference/react-dom/components/link.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index 730d9e995bd..e07f21c5520 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -158,9 +158,7 @@ export default function SiteMapPage() { ### Controlling stylesheet precedence {/*controlling-stylesheet-precedence*/} -Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, two components render stylesheets, and the one with the higher precedence goes later in the document even though the component that renders it comes earlier. - -{/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/} +Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the ``. @@ -172,17 +170,22 @@ export default function HomePage() { + ... ); } function FirstComponent() { - return ; + return ; } function SecondComponent() { - return ; + return ; +} + +function ThirdComponent() { + return ; } ``` From e0a5f657b81eff70a076bf0ea6bbc17efa3f3cb3 Mon Sep 17 00:00:00 2001 From: dan Date: Mon, 16 Dec 2024 15:57:48 +0000 Subject: [PATCH 2/2] Update link.md --- src/content/reference/react-dom/components/link.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index e07f21c5520..1c58a5eecd2 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -192,6 +192,8 @@ function ThirdComponent() { +Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher". + ### Deduplicated stylesheet rendering {/*deduplicated-stylesheet-rendering*/} If you render the same stylesheet from multiple components, React will place only a single `` in the document head.