MUI theme provider with app directory

[sreekanthjnayar]

I have created a nextjs app (which uses app directory) which uses MUI-v6. There is a route in the app where based on colours path in the path the theme of the page changes. In MUI, this involves the usage of ThemeProvider and the createTheme function. The createTheme can be used only in a file marked as use client. I have hence combined this logic into 1 component and have wrapped up my entire app in this. What surprised me was that inspite of this wrapper being marked as use client, the rendering is still happening on the server. The console statement in the custom theme provider is printing on the server as well. I was under the assumption that use client will force that specific component to be rendered only on the client and in this case I thought it would force the entire app to be rendered on the client. Is my understanding wrong about how use client works? I have attached screenshots of the custom theme provider and the layout file for reference.

[icyJoseph]

I was under the assumption that use client will force that specific component to be rendered only on the client and in this case I thought it would force the entire app to be rendered on the client. Is my understanding wrong about how use client works?

Yeah, that's a common misconception.

Client Components, are the good old components we have had this far. And they are SSR'd: reactwg/server-components#4

The new things are the Server Components, which run only on the server, and never send their JavaScript to the client.

[sreekanthjnayar]

Thank you @icyJoseph