-
Notifications
You must be signed in to change notification settings - Fork 45.7k
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
[React 19] precedence prop is not respected when used on style element #29225
Comments
Simplified repro: https://codesandbox.io/p/sandbox/magical-oskar-8gnqgd?file=%2Fsrc%2Findex.js%3A23%2C60 @souporserious Can you check if the same happens with |
Yeah, for sure! Added another CodeSandbox demo here that showcases all three: https://codesandbox.io/p/devbox/react-style-precedence-bug-rendertostring-rendertostaticmarkup-rendertopipeablestream-z9zmcl?file=%2Findex.js%3A3%2C1-5%2C26 |
Thank you. This wasn't using React 19 but React 18. Though it doesn't change much in React 19: https://codesandbox.io/p/devbox/react-style-precedence-bug-rendertostring-rendertostaticmarkup-rendertopipeablestream-forked-7cwxjk?file=%2Findex.js%3A3%2C1-5%2C26&workspaceId=ae5ed9d5-7ce3-4b4a-a32e-93bfc31fc065 |
@souporserious we had an error in our docs. the If you name your precedences like "low" and "high" and you want that to be reflected in how React treats them then React must encounter "low" first and "high" second In the repro the order is flipped from the meaning of the words used which makes it seem like React is not respecting the precedence value. Keep in mind that many folks might name their precedences like "reset", "utilties", "content", "important" or whatever. so it isn't always going to be an ordinal work like "low" "medium" "high". Next.js uses "nextjs" and doesnt' try to compose styles with different precedences, opting to use the hierarchy of the pp to ensure that later styles override earlier ones |
Fixing docs here: reactjs/react.dev#6908 |
Fixed:
|
Summary
Setting the
precedence
prop on astyle
element with a uniquehref
does not seem to have any affect and the style elements will be ordered based on where they were in the React tree.CodeSandbox Demo
I expected the style tags to be grouped and ordered based on precedence. This PR shows an example of the output when used with an atomic class name approach.
The text was updated successfully, but these errors were encountered: