CODEWITHSUNDEEP
reactjsmaterial-uinext.js
SOLUTRAFFIC DEVELOPER
SOLUTRAFFIC DEVELOPER

Reputation: 59

Material UI + Nextjs: Drawer

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.

Upvotes: 5

Views: 8938

Answers (4)

Chandra sekhar Rachapudi
Chandra sekhar Rachapudi

Reputation: 11

Same Issue I have faced. So this is the solution for that

https://codeload.github.com/mui-org/material-ui/tar.gz/master

Download from that URL material UI+NextJS boilerplate code

download the tar.gz file > material-ui-master > examples > nextJS

Upvotes: 0

zilijonas
zilijonas

Reputation: 3745

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,
})

Upvotes: 0

Stericson
Stericson

Reputation: 415

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.

Upvotes: 3

Alessio Marchi
Alessio Marchi

Reputation: 584

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

Upvotes: 6

Related Questions