Need an API for injecting styles into `<head>` #13410

siriwatknp · 2025-04-15T04:41:19Z

siriwatknp
Apr 15, 2025

Hi, I am from MUI core team.

I am working on the official setup for using Material UI with React Router v7 but still finding a proper way to do it. For context, Material UI is using Emotion behind the scene and it can be integrated with Next.js both Pages and App Router.

Here are the approaches that does not work at the moment:

Cannot extract styles after server-rendered. This is the Emotion's official way of doing SSR styles but there is no way to get the static html string from React Router.
Use a custom registry to collect styles on server-rendered but there is no way to insert the styles into head after server-rendered. We are using this option for integrating with Next.js App Router because they provide a hook useServerInsertedHTML.

I would like to know what's your opinion on this and what's your though on the solution.

sergiodxa · 2025-04-15T07:43:08Z

sergiodxa
Apr 15, 2025
Collaborator

Regarding 1:

React Router apps has a file app/entry.server.tsx (if you don't have the file use npx react-router reveal to get the default one) where SSR happens. By default this uses streaming SSR as that's needed to support sending promises, and in the future also RSC. But you could change it to use renderToString to get the static HTML string instead.

Regarding 2:

Since React 19, which is supported by React Router, the <style> tag can be rendered in any part of the component tree and React is supposed to move it to the <head> and dedupe them, wouldn't this be able to collect the styles used on SSR?

4 replies

siriwatknp Apr 16, 2025
Author

Thanks for the info. I will try it out.

siriwatknp Apr 17, 2025
Author

I tried to achieve (1) here in this repo but it's weird that the custom cache is not picked up.

The repo comes from the installation and npx react-router reveal.

However, it works with Remix example https://github.com/remix-run/examples/blob/main/emotion/app/entry.server.tsx.

siriwatknp Apr 17, 2025
Author

By disabling JS from the DevTool, I expect to see the class using mui- key based on the custom cache.
However, it's still css- (the default one from Emotion)

I thought that I might be about React version but no. The issue still present for both 18 and 19.

samausir May 13, 2025

But you could change it to use renderToString to get the static HTML string instead.

I'm on a Remix v2 app and looking to upgrade it to RR v7. The migration guide tells me I need to adopt all future flags, one of which is v3_singleFetch. And the Single Fetch documentation in turn tells me to remove any usage of renderToString. So I don't think that's an option.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Need an API for injecting styles into `<head>` #13410

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Need an API for injecting styles into <head> #13410

siriwatknp Apr 15, 2025

Replies: 1 comment · 4 replies

sergiodxa Apr 15, 2025 Collaborator

siriwatknp Apr 16, 2025 Author

siriwatknp Apr 17, 2025 Author

siriwatknp Apr 17, 2025 Author

samausir May 13, 2025

Need an API for injecting styles into `<head>` #13410

siriwatknp
Apr 15, 2025

Replies: 1 comment 4 replies

sergiodxa
Apr 15, 2025
Collaborator

siriwatknp Apr 16, 2025
Author

siriwatknp Apr 17, 2025
Author

siriwatknp Apr 17, 2025
Author