Material UI + Nextjs: Drawer

user_13131593 0
Viewed 5707

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.

enter image description here

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.

material-ui next.js reactjs
4 Answers
user_122259410

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.

user_8019080

If modifying the app as suggested in Material-UI NextJS examples did not help, you can lazy load your component. This way you will force it to create styles only after the client-side is loaded.

Guide to disable SSR for a component: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

import dynamic from 'next/dynamic'

export const ComponentWithNoSSR = dynamic(() => import('./Component'), {
  ssr: false,
})
user_79883040
user_97208710
Related