material-ui [material-nextjs][system] Backport CSS layers to v5

Docs

Next.js Pages

demo: https://mui5-nextjs-pages.vercel.app/
repo: https://github.com/siriwatknp/mui5-nextjs-pages

Next.js App Router

demo: https://mui5-nextjs-app.vercel.app/
repo: https://github.com/siriwatknp/mui5-nextjs-app

Vite

demo: https://mui5-vite.vercel.app/
repo: https://github.com/siriwatknp/mui5-vite

This PR cherry pick 4 commits with manual adjustments for CSS layers:

#43412: only the export serializeStyles function, not the optimization part.
#45428: enable CSS layer for StyledEngineProvider
#45596: enable CSS layer for pages router
#46001: modular CSS Layers
[x] I have followed (at least) the PR section of the contributing guide.

Jun 12 '25 05:06 siriwatknp

Netlify deploy preview

@material-ui/core: parsed: +0.45% , gzip: +0.55% @material-ui/lab: parsed: +0.30% , gzip: +0.39% @material-ui/system: parsed: +2.45% , gzip: +2.33% @mui/joy: parsed: +0.35% , gzip: +0.18%

Bundle size report

Details of bundle changes (Toolpad) Details of bundle changes

Generated by :no_entry_sign: dangerJS against 266d80a803942dc999efaa806bc4e696d0645c2f

Jun 12 '25 06:06 mui-bot

Added @sai6855 as a reviewer, in case you see anything missing/wrong.

Jun 16 '25 13:06 siriwatknp

@siriwatknp looks good!

Same question as the v6 one: Are there any details of the implementation that we had to change for the v5 backport? Or is the logic all the same?

Logic and API are the same.

Jun 25 '25 01:06 siriwatknp