[material-ui][docs] NextJS app router CSS injection order

[mattsbennett]

Duplicates

• I have searched the existing issues

Related page

https://mui.com/material-ui/guides/next-js-app-router/#css-injection-order

Kind of issue

Unclear explanations

Issue description

I'm customizing Material UI styles via CSS modules, so I need to inject them before the MUI emotion styles as described in the doc; however, the example linked at the top of the doc (https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) uses much different code than the rest of the code samples in the doc, and it seems the prepend: true option is deprecated in favour of insertionPoint, but it isn't clear how to achieve the same effect with the latter.

I tried changing the following in EmotionCache.tsx from the linked example repo:

- const cache = createCache(options);
+ // It seems prepend is deprecated, but it's not clear how to use insertionPoint
+ // nor can either be passed as a prop to NextAppDirEmotionCacheProvider
+ const cache = createCache({ ...options, prepend: true });

- dangerouslySetInnerHTML={{ __html: styles }}
+ dangerouslySetInnerHTML={{ __html: `@layer emotion {${styles}}` }}

And this sort of works, but the injection order is only correct some of the time when reloading the page. Maybe 10% of regular reloads and 30% of hard reloads. When not injected properly, the emotion styles are not applied with @layer for some reason.

This clarification was also requested here: #37315 (comment).

Context 🔦

No response

[mj12albert]

@mattsbennett We'll soon replace this guide with a separate integration package for Next.js: #39947

In the mean time you can refer to the latest version of the CacheProvider component from the PR and see if it fixes your issue: https://github.com/mui/material-ui/blob/f4858d50b57e009afb8f05cbf1e4036374509bd2/packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx