Material-ui: Box Component odd behavior on Next.js

[manferlo81]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Considering the following Next.js page...

import { Box, Typography } from '@material-ui/core'
import React from 'react'

const HomePage = () => {
  return (
    <Box py={10} mx={10}>
      <Typography variant="h4">Home Page</Typography>
    </Box>
  )
}

export default HomePage

...the margin and padding are not present. and I get a Warning: Prop 'className' did not match. Server: "MuiBox-root MuiBox-root-42" Client: "MuiBox-root MuiBox-root-2" error. I believe the error is happening when Next.js tries to hydrate the page. Or maybe I am using the Box Component the wrong way.

Expected Behavior 🤔

... I expect to see a box with some left and right margin and some top and bottom padding. In fact I get the expected behavior while life reload the page in development mode but it breaks again when I manually reload the page or navigate from a different page to the affected one. I got the same behavior after I built the app for production.

Steps to Reproduce 🕹

Steps:

1. Create a new Next.js app
2. Use the javascript code above as a page

Context 🔦

I need to apply a margin to my page content in order to space it out from the static AppBar. I could use CSS but why should I when Material UI provides an easier way to do it.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.2 |
| React | v16.12.0 |
| Browser | Google ChromeVersion 80.0.3987.100 (Official Build) (64-bit) |
| OS | Windows 7 Ultimate & Windows 10 |

[support[bot]]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

Tip, check our Next.js examples to configure the server side readering correctly.

[manferlo81]

@oliviertassinari thanks a lot for your support. In had a quick look at the example (from my phone) and I didn't see where I got wrong, I will clone it later and try to figure it out. Thanks a lot again.

[mikebarkmin]

@oliviertassinari thanks a lot for your support. In had a quick look at the example (from my phone) and I didn't see where I got wrong, I will clone it later and try to figure it out. Thanks a lot again.

Did you manage to fix it? I am facing the same issue.

[manferlo81]

@oliviertassinari thanks a lot for your support. In had a quick look at the example (from my phone) and I didn't see where I got wrong, I will clone it later and try to figure it out. Thanks a lot again.

Did you manage to fix it? I am facing the same issue.

Hi @mikebarkmin, I did manage to fix it. As @oliviertassinari said I just needed to read the documentation, everything is there, check the "Server Side Rendering" section on Material UI documentation.

https://material-ui.com/styles/advanced/#server-side-rendering

I hope it helps.

[mikebarkmin]

I have read the SSR stuff. I also followed the reference implementation for next.js. But this behavior still exists. Can you explain what do you changed?

_app.js: https://gitlab.com/openpatch/web-frontend/-/blob/master/pages/_app.js
_document.js: https://gitlab.com/openpatch/web-frontend/-/blob/master/pages/_document.js

[manferlo81]

@mikebarkmin in a quick inspection to your code, it looks good to me, I am not sure what is causing the problem. I have a couple things written in a different way but I dont think it makes any difference. Maybe you should try cloning the example and from there test to see a what point it breaks, to figure out what is causing the issue.

[mikebarkmin]

Hi I have inspected the misbehaviour futher and come to the conclusion, that the usage of useLocalState causes the hydrated ssr page to collapse. I am not entirely sure why that is. Maybe someone has an idea?

Here is the useLocalStorage hook: https://gitlab.com/openpatch/web-frontend/-/blob/master/utils/storage.js
And here is where I use it: https://gitlab.com/openpatch/web-frontend/-/blob/764d36c06b19479358f69b5832aad21695a82319/components/DrawerLayout.js#L359

When I remove the hook everything works fine.

[oliviertassinari]

@mikebarkmin Won't you have a server-side mismatch without Material-UI anyway. I don't think that it can work if you read from the sessionStorage in the render method.

[mikebarkmin]

@oliviertassinari Ok. Maybe I am doing something wrong. But I think I only read from localStorage, if I am on the client. See https://gitlab.com/openpatch/web-frontend/-/blob/master/utils/storage.js#L53. I thought the process.browser helps to identify, if it is ssr or csr.

[oliviertassinari]

React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches.

https://reactjs.org/docs/react-dom.html#hydrate

[utiq]

@manferlo81 I'm experiencing the same issue, only with the Box component, could you fix it?

[manferlo81]

@utiq my issue was indeed with the Box component but it was my mistake and I solved it reading the documentation. I think the link is https://material-ui.com/styles/advanced/#server-side-rendering.

I hope it helps you.