Skip to content

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jun 23, 2025

closes #45878, closes #45873

This PR adds example for Material UI + React Router + Vite

  • It has been tested with Material UI v7, React Router v7 and Vite v6.
  • On the server, the styles are extracted to critical inline CSS (similar approach to Next.js pages router example)

@siriwatknp siriwatknp added package: material-ui examples Relating to /examples. labels Jun 23, 2025
@siriwatknp siriwatknp changed the title add material-ui-react-router-ts example [examples] Add material-ui-react-router-ts example Jun 23, 2025
@siriwatknp siriwatknp requested a review from a team June 23, 2025 05:03
@mui-bot
Copy link

mui-bot commented Jun 23, 2025

Netlify deploy preview

https://deploy-preview-46406--material-ui.netlify.app/

Bundle size report

Bundle Parsed Size Gzip Size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 0efd252

optimizeDeps: {
include: ['@emotion/*', '@mui/*'],
},
noExternal: ['@emotion/*', '@mui/*'],
Copy link
Member

Choose a reason for hiding this comment

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

😕 This will require the user to add every library that uses emotion in this list?

Copy link
Member Author

Choose a reason for hiding this comment

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

I believe so.

Copy link
Member

@Janpot Janpot left a comment

Choose a reason for hiding this comment

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

Love this, great job! Let's work towards removing these vite config in a separate effort.

@siriwatknp siriwatknp merged commit 770923f into mui:master Jun 24, 2025
18 checks passed
@Janpot
Copy link
Member

Janpot commented Jun 24, 2025

Alright, let's keep an eye on remix-run/react-router#13871 to remove the ssr.noExternal option.

@CerealeZ
Copy link

Hi, I've been working on solutions regarding the Emotion library and the server side using streaming, and I've arrived here. I saw the solution you implemented, and it works well, but there's just one detail: you're collecting all the chunks and not sending anything to the client until everything is loaded, which makes streaming useless (and therefore the Await and Suspense APIs).

https://github.com/siriwatknp/material-ui/blob/0efd2528406ab10450cfa73fd440ccc098750f1c/examples/material-ui-react-router-ts/app/entry.server.tsx#L45-L50

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

examples Relating to /examples.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[docs] Official example needed for react-router v7 Styles not loading in RR v7

4 participants