Next js with Mui V5.0 Warning: Prop `className` did not match. Server and Client

I am new to Nextjs I have copy starter templete from https://github.com/mui-org/material-ui/tree/master/examples/nextjs . my Next app perfectly but when i add makeStyles to components style not added to components along with error is dispalyed on console is Warning: Prop className did not match. Server and Client My Code is :-

///////// /////////////        _document.tsx   //////////////////////////////////////////
import * as React from 'react'
import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from "next/document";
import Theme from "../src/styles/Theme/LightTheme";
import createEmotionCache from "../src/utility/createEmotionCache";
import createEmotionServer from "@emotion/server/create-instance";
export default class CustomDocument extends Document {

    static async getInitialProps(ctx: DocumentContext) {

        const originalRenderPage = ctx.renderPage;

        const cache = createEmotionCache();
        const { extractCriticalToChunks } = createEmotionServer(cache);

        ctx.renderPage = () =>
            originalRenderPage({
                enhanceApp: (App: any) =>
                    function EnhanceApp(props) {
                        return <App emotionCache={cache} {...props} />;
                    },
            });

        const initialProps = await Document.getInitialProps(ctx);
       
        const emotionStyles = extractCriticalToChunks(initialProps.html);
        const emotionStyleTags = emotionStyles.styles.map((style) => (
            <style
                data-emotion={`${style.key} ${style.ids.join(' ')}`}
                key={style.key}
                dangerouslySetInnerHTML={{ __html: style.css }}
            />
        ));

        return {
            ...initialProps,
            emotionStyleTags,
        };
    }



    render(): JSX.Element {
        return (
            <Html lang="en">
                <Head>
                    <meta name="theme-color" content={Theme.palette.primary.main} />
                    <link rel="shortcut icon" href="/static/favicon.ico" />
                    <link
                        rel="stylesheet"
                        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                    />
                    {/* Inject MUI styles first to match with the prepend: true configuration.*/}
                    <meta name='any' content='this is content'/>
                    {(this.props as any).emotionStyleTags} 
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

and component code is :-

import { AppBar, Toolbar, Box, Typography, IconButton, Container } from "@mui/material";
import { NotificationAdd, AccountCircle, EmailSharp } from '@mui/icons-material'
import React from "react";
interface HeaderProps {
    navigationItems?: string[]
    menuItemTransistionComponent?: string
}
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
        color: 'inherit !important',
    },
    logo: {
        fontWeight: '700'
    }
}), {
    name: 'MyComponents'
})
export default function Header(props: HeaderProps): JSX.Element {
    const classes = useStyles()
    return (
        <Box>
            <AppBar position="sticky">
                <Container fixed>
                    <Toolbar classes={{ root: classes.root }}>
                        <Box flexGrow={1}>
                            <Box className={classes.root}>
                                <Typography variant="h5" color='warning' >Next</Typography>
                                <Typography variant="h5" color='error' >@mui</Typography>
                            </Box>
                        </Box>
                        <Box>
                            <IconButton>
                                <EmailSharp />
                            </IconButton>
                            <IconButton>
                                <EmailSharp />
                            </IconButton>
                            <IconButton>
                                <EmailSharp />
                            </IconButton>
                        </Box>
                    </Toolbar>
                </Container>
            </AppBar>
        </Box>
    )
}

_app.tsx code is :-

import * as React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import theme from "../src/styles/Theme/LightTheme";
import createEmotionCache from '../src/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export default function MyApp(props) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  emotionCache: PropTypes.object,
  pageProps: PropTypes.object.isRequired,
};

i have tried many codes from this :- 1 . Class name hydration mismatch in server and client, (Warning: Prop `className` did not match Server and Client) 2. Warning: Prop `className` did not match ~ Material UI css arbitrarily breaks on reload please help me! thank you !

Next js with Mui V5.0 Warning: Prop `className` did not match. Server and Client

0 Answers