TanStackT
TanStack2mo ago
2 replies
rubber-blue

Change head tags order ?

For the past few days I've been working on updating the "legacy" code of our app using React Router, reorganizing the structure and the way it works (the app was initially developed with no knowledge of React Router).

I'm running into an issue with conflicting css, i have a "generic" css imported in a route.tsx layout using link tags in the head props.
For a specific page, i have a part of this generic css set in the page using a style tag, but for obscure reasons, if i have this style set after the link, the css explodes, and if i remove it it's worst, especially in terms of performance scores. But if the style tag is before the link it's all good.

Is there a way, without any workarounds, to make the style tag come before the link tag in the HTML?

-
routes/__root.tsx
=> head => ({links: [{ rel: 'stylesheet', href: appCss }]})
- routes/{-$locale}/mypage.tsx => head => ({styles: [{ type: 'text/css', children: customCss }]})
Was this page helpful?