amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-22 20:01:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix stylesheet precedence example (#7235)

Browse Source 
* Fix stylesheet precedence example

* Update link.md

---------

Co-authored-by: dan <dan.abramov@gmail.com>
This commit is contained in:
Eric Cote
2024-12-16 10:58:20 -05:00
committed by GitHub
parent 51864f6f58
commit bc93f0578d
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/content/reference/react-dom/components/link.md
View File

@@ -151,9 +151,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 `<head>`.
<SandpackWithHTMLOutput>
@@ -165,23 +163,30 @@ export default function HomePage() {
<ShowRenderedHTML>
<FirstComponent />
<SecondComponent />
<ThirdComponent/>
...
</ShowRenderedHTML>
);
}
function FirstComponent() {
return <link rel="stylesheet" href="first.css" precedence="high" />;
return <link rel="stylesheet" href="first.css" precedence="first" />;
}
function SecondComponent() {
return <link rel="stylesheet" href="second.css" precedence="low" />;
return <link rel="stylesheet" href="second.css" precedence="second" />;
}
function ThirdComponent() {
return <link rel="stylesheet" href="third.css" precedence="first" />;
}
```
</SandpackWithHTMLOutput>
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 `<link>` in the document head.