title: Nextjs with material-ui: Prop `className` did not match. Server:
body: <p>I'm creating a NextJS app that uses React Material-Ui and I'm getting the <code>Prop 'className' did not match.</code> error, even though I changed my <code>_app.tsx</code> and <code>_document.tsx</code> according to the documentation.</p>
  <p>My <code>_app.tsx</code>:</p>
  <pre class="lang-js prettyprint-override"><code>// pages/_app.tsx
  /* eslint-disable react/jsx-props-no-spreading */
  import { FC, useEffect } from 'react';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import { ThemeProvider } from '@material-ui/core/styles';
  import { AppProps } from 'next/app';
  import Head from 'next/head';
  import { defaultTheme as theme  } from '../src/themes';
  
  const MyApp: FC&lt;AppProps&gt; = ({ Component, pageProps }) =&gt; {
      useEffect(() =&gt; {
          // Remove the server-side injected CSS.
          const jssStyles = document.querySelector('#jss-server-side');
          if (jssStyles) {
              jssStyles?.parentElement?.removeChild(jssStyles);
          }
      }, []);
  
      return (
          &lt;&gt;
              &lt;Head&gt;
                  &lt;title&gt;My App&lt;/title&gt;
                  &lt;meta
                      name=&quot;viewport&quot;
                      content=&quot;minimum-scale=1, initial-scale=1, width=device-width&quot;
                  /&gt;
              &lt;/Head&gt;
              &lt;ThemeProvider theme={theme}&gt;
                  {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                  &lt;CssBaseline /&gt;
                  &lt;Component {...pageProps} /&gt;
              &lt;/ThemeProvider&gt;
          &lt;/&gt;
      );
  };
  
  export default MyApp;
  
  </code></pre>
  <p>My <code>_document.tsx</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import Document, {
      Html,
      Head,
      Main,
      NextScript,
      DocumentProps,
      DocumentContext,
  } from 'next/document';
  import { ServerStyleSheets } from '@material-ui/core/styles';
  import { defaultTheme as theme } from '../src/themes';
  
  export default class MyDocument extends Document {
      static getInitialProps = async (ctx: DocumentContext) =&gt; {
          const sheets = new ServerStyleSheets();
          const originalRenderPage = ctx.renderPage;
  
          ctx.renderPage = () =&gt;
              originalRenderPage({
                  enhanceApp: (App) =&gt; (props) =&gt;
                      sheets.collect(&lt;App {...props} /&gt;),
              });
  
          const initialProps = await Document.getInitialProps(ctx);
  
          return {
              ...initialProps,
              // Styles fragment is rendered after the app and page rendering finish.
              styles: [
                  ...React.Children.toArray(initialProps.styles),
                  sheets.getStyleElement(),
              ],
          };
      };
  
      render() {
          return (
              &lt;Html lang=&quot;en&quot;&gt;
                  &lt;Head&gt;
                      {/* PWA primary color */}
                      &lt;meta
                          name=&quot;theme-color&quot;
                          content={theme.palette.primary.main}
                      /&gt;
                      &lt;link
                          rel=&quot;stylesheet&quot;
                          href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,800,900&amp;display=swap&quot;
                      /&gt;
                  &lt;/Head&gt;
                  &lt;body&gt;
                      &lt;Main /&gt;
                      &lt;NextScript /&gt;
                  &lt;/body&gt;
              &lt;/Html&gt;
          );
      }
  }
  
  </code></pre>
  <p>Browser Console Error:</p>
  <pre><code>Warning: Prop `className` did not match. Server: &quot;MuiBox-root MuiBox-root-10&quot; Client: &quot;MuiBox-root MuiBox-root-13&quot;
  div
  StyledComponent@webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:22
  div
  Grid@webpack-internal:///./node_modules/@material-ui/core/esm/Grid/Grid.js:236:29
  WithStyles@webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:25
  div
  Grid@webpack-internal:///./node_modules/@material-ui/core/esm/Grid/Grid.js:236:29
  WithStyles@webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:25
  div
  Container@webpack-internal:///./node_modules/@material-ui/core/esm/Container/Container.js:85:17
  WithStyles@webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:25
  div
  StyledComponent@webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:22
  div
  StyledComponent@webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:22
  Home@webpack-internal:///./pages/index.tsx:93:17
  ThemeProvider@webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:42:18
  MyApp@webpack-internal:///./pages/_app.tsx:37:19
  ErrorBoundary@webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47
  ReactDevOverlay@webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:20
  Container@webpack-internal:///./node_modules/next/dist/client/index.js:254:20
  AppContainer@webpack-internal:///./node_modules/next/dist/client/index.js:750:18
  Root@webpack-internal:///./node_modules/next/dist/client/index.js:889:19
  </code></pre>
  <p>I just can't figure out what's happening. Any suggestion?</p>