Next.js: The bug when use @material-ui/styles in next.js

[Joeoeoe]

Bug report

Describe the bug

I use @material-ui/styles in Next.js develop mode. And If I use makeStyles, createStyles add styles to the elements, it will be useless when I refresh the page. After the HMR(after you type something in the source code), the style will be showed.

To Reproduce

reproduce bug project on github

1. npm run dev, start develop mode
2. enter http://localhost:3000/ or refresh at http://localhost:3000/
3. The style made by useStyle is useless.
4. After HMR, the style could be showed.

Expected behavior

The style should be useful when enter the http://localhost:3000/ instead of after HMR

Screenshots

Enter http://localhost:3000/ or refresh at http://localhost:3000/

After HMR

System information

• OS: Windows10 1909
• Browser : chrome85
• Version of Next.js: 9.5.3
• Version of Node.js: 12.18.2

[gabrielalmeida]

Next.js SSR is unaware of your styles when generating the initial page render. Use the MUI example setup with Next.js as a reference.

Note the changes on _app.js and _document.js.

[Joeoeoe]

Thanks! @gabrielalmeida I also find the document on the Material-UI Server Rendering