Material UI + Nextjs: Drawer

Question

I have a problem with the implementation of the Material UI Drawer in my project of React Nextjs.

The problem is that when I reload the page in the navigator, the styles of the drawer and the App bar crash. This didn't happen when I reload the server, only at the page reload.

At the moment I don't have any idea of what I have to try to solve this problem, and I don't know why is this happening because the only thing that I have do it is print and paste the example o material UI https://material-ui.com/components/drawers/#drawer in a layout component, not in a page.

Answer 1

That's becouse NextJS uses SSR. In material UI documentation there is a part completely dedicated to NEXTJS:

https://material-ui.com/styles/advanced/#next-js

Or, if you want, you can check the material-ui repo (have a look to _app.js and _document.js)

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Answer 2

I also faced this problem and found a solution.

The problem stems from the fact that Mui (MakeStyles) takes your CSS class names and attempts to create unique names to avoid collisions.

You can read about this here: https://material-ui.com/styles/advanced/#next-js

When we do a static export, the pre-rendered html file references a class name that is different from the class names defined in the /_next/ folder.

It's mentioned in the above documentation that class names are deterministic if three conditions are met (Read above). My solution was just to name my style sheet with something starting with "Mui". Then the class names are the same in both the pre-rendered html and the JS in /_next/.

    const useStyles = makeStyles(theme => (
          {
              ...
          }), 
          {
              name: "MuiCustomStyle"
          });

I'm sure this isn't a "proper" solution, but it solved the issue for me.