React + Material-UI – Warning: Prop className did not match

by

The problem is the SSR rendering in Next.js, which produces the style fragment before the page is rendered.

Using Material UI and Next.js (as the author is using), adding a file called _document.js solved the problem.

Adjusted _document.js (as suggested here):

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/styles'; // works with @material-ui/core/styles, if you prefer to use it.
import theme from '../src/theme'; // Adjust here as well

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* Not exactly required, but this is the PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  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()],
  };
};

More Related Contents:

  1. Why are cookies not sent to the server via getServerSideProps in Next.js?
  2. Next.js: How to get static assets from within getStaticProps
  3. Module not found: Can’t resolve ‘fs’ in Next.js application
  4. Next.js: document is not defined
  5. Material-UI Rendering Bugs in production / build
  6. React-router with BrowserRouter / browserHistory doesn’t work on refresh
  7. Error message “error:0308010C:digital envelope routines::unsupported”
  8. ‘npm start’ returns error: “There might be a problem with the project dependency tree”
  9. Create a HOC (higher order component) for authentication in Next.js
  10. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  11. npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
  12. How to build a production version of React without minification?
  13. How to send email from my react web application
  14. How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
  15. unable to deploy next js to azure
  16. Jest gives `Cannot find module` when importing components with absolute paths
  17. Gatsby Failed Build – error “window” is not available during server side rendering
  18. React app error: Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
  19. Get version number from package.json in React Redux (create-react-app)
  20. How to organise file structure of backend and frontend in MERN
  21. How to fix “FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory” error
  22. Access to XMLHttpRequest at ‘…’ from origin ‘localhost:3000’ has been blocked by CORS policy
  23. React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)
  24. One project with multiple package.json files
  25. How to get SCSS variables into react
  26. Unable to deploy React JS application on Azure App service
  27. Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
  28. How to deploy reactapp with heroku-22?
  29. Want to have an event handler for the browser’s back button with next.js
  30. Webpack how to build production code and how to use it

Leave a Comment