ClassName generator not working with Next.js App router

[NotYoojun]

Steps to reproduce

Steps:

1. Open this link to live example: click here
2. npm run dev
3. Open the devtools and inspect the element tree

Current behavior

All the class names stay unchanged:

Expected behavior

All class names should be transformed by the ClassNameGenerator.

Context

I also tried to import the 'init-cls.ts' as a client script, but that only affects the client side, and the server side is just doing nothing.
I'm following this doc: https://mui.com/material-ui/experimental-api/classname-generator/

Your environment

System:
OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
Binaries:
Node: 20.9.0 - /usr/local/bin/node
npm: 9.8.1 - /usr/local/bin/npm
pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: latest => 11.11.1
@emotion/styled: latest => 11.11.0
@mui/core-downloads-tracker: 6.0.0
@mui/icons-material: latest => 6.0.0
@mui/material: latest => 6.0.0
@mui/material-nextjs: latest => 6.0.0
@mui/private-theming: 6.0.0
@mui/styled-engine: 6.0.0
@mui/system: 6.0.0
@mui/types: 7.2.16
@mui/utils: 6.0.0
@types/react: ^19.0.0 => 19.0.2
react: ^19.0.0 => 19.0.0
react-dom: ^19.0.0 => 19.0.0
typescript: latest => 5.1.6

Search keywords: next, nextjs, app, classname, styles, experimental, css, class

[NotYoojun]

Anyone looking into this? please

[aarongarciah]

Hi @NotYoojun, the CodeSandbox link is broken. Can you share a reproduction?

[NotYoojun]

@aarongarciah Hi, what about this one?
https://codesandbox.io/p/devbox/mre-mui-cssclassgenerator-next-appdir-dp4zz2

[aarongarciah]

@NotYoojun that sandbox works. We still not have a guide for Next.js App router specifically (and React Server Components in general) in the docs.

@siriwatknp is there a recommendation? It kinda works if you import the class name generator module in page.tsx instead of layout.tsx, but it's obviously not a good solution (the "entry" point is layout.tsx, but it's a RSC) and it's buggy: it duplicates the prefix in the Box component (probably calls twice the generator function). See this sandbox: https://codesandbox.io/p/devbox/mre-mui-cssclassgenerator-next-appdir-forked-mcj7gm?workspaceId=ws_TYgwg9BhnaH6MHvmXJ1vH9