Skip to content

[examples] Add material-ui-react-router-ts example #46406

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

Merged
merged 8 commits into from
Jun 24, 2025

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 Specific to @mui/material 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
examples Relating to /examples package: material-ui Specific to @mui/material
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
3 participants