[material-ui] Prop className did not match with Next.js

[vupham04112002]

Steps to reproduce

I'm not a native, please bear with me.

Back Story

Back in the day without NextJS or Server Side Rendering We thought of a way to reuse the responsive logic of a component, we decided to add the size property on every component, and change it based on the screen using useMediaQuery.

the hook useResponsive at line 9 is our custom hook based on useMediaQuery

This works well for us.

Current behavior

Currently, we try to use NextJS And got this warning

it makes our UI always render the xs size, and only works after we try to resize the screen, you can see the demo below

https://github.com/mui/material-ui/assets/164217891/d5b6e5df-08f9-481e-9dc1-b53cdbd4bdf3

after researching, we found that we set noSsr in useMediaQuery to true, so we set it to false

we no longer see the issue, but a new problem comes, on the first time, rendering, the useMediaQuery always returns false, making our UI always render the xs size for the first 1 second, and then it renders the correct size.

we have tried all approaches from this https://github.com/vercel/next.js/issues/46605, but still not working

we are stuck here, please help, thank you so much.

Expected behavior

No more warning, the useMediaQuery should return true on first rendering

Context

No response

Your environment

I'm using the latest

Search keywords: Prop className did not match

[mnajdova]

This section of the docs may be helpful: https://mui.com/material-ui/react-use-media-query/#server-side-rendering?

[vupham04112002]

thanks, I will take a look at it and tell you later

[vupham04112002]

hi, it seems like the solution in https://mui.com/material-ui/react-use-media-query/#server-side-rendering doesn't suit my expectations, I'm trying to reuse the responsive code, by encapsulating it in the component, and public the size property. do you have a best practice for reusing the responsive code that does not cause the issue and fit the design of MUI?