Skip to content

Fix "Controlling stylesheet precedence" example #7309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/content/reference/react-dom/components/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,8 @@ 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.
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 one with a `precedence` value that was discovered earlier goes earlier in the document even though a component that renders it comes later.

{/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


<SandpackWithHTMLOutput>

Expand All @@ -172,6 +171,7 @@ export default function HomePage() {
<ShowRenderedHTML>
<FirstComponent />
<SecondComponent />
<ThirdComponent />
...
</ShowRenderedHTML>
);
Expand All @@ -185,6 +185,10 @@ function SecondComponent() {
return <link rel="stylesheet" href="second.css" precedence="low" />;
}

function ThirdComponent() {
return <link rel="stylesheet" href="third.css" precedence="high" />;
}

```

</SandpackWithHTMLOutput>
Expand Down