Box Component odd behavior on Next.js

• The issue is present in the latest release.
• 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

[kazukinagata]

Hey guys! I faced this issue when turn on reactStrictMode: true on next.config.js. Turning off reactStrictMode, and setting up _document.tsx and _app.tsx according to (https://material-ui.com/styles/advanced/#server-side-rendering)[https://material-ui.com/styles/advanced/#server-side-rendering] works fine!

Version: 10.0.3

[mmclafferty]

Sorry to resurrect this, but also experiencing this issue with TextField when using variant=“outlined”. Using nextjs 10.1.3, material ui core 4.11.3 and only when reactStrictMode: true. I too have followed the nextjs examples to the T.