Блог

Главная - Вопросы по программированию - NextJS MaterialUI — prop `имя_класса` не соответствует

NextJS MaterialUI — prop `имя_класса` не соответствует

#reactjs #material-ui #next.js #react-material

Вопрос:

Я пробовал несколько решений, которые были предложены в официальных примерах и форумах MaterialUI и NextJS, но безуспешно. Моя страница не может использовать мои стили MUI при первом рендеринге, и я продолжаю получать эту ошибку:

 Warning: Prop `className` did not match. Server: "makeStyles-image-3 makeStyles-image-5" Client: "makeStyles-image-4 makeStyles-image-7"

Мой _document.tsx :

 import React from 'react';
import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';

export default class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    <meta charSet="utf-8" />
                    <link rel="icon" href="/favicon.ico" />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }

    static async getInitialProps(ctx: DocumentContext) {
        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: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()] };
    }
}

Мой _app.tsx :

 import '../styles/globals.css';
import type { AppProps } from 'next/app';
import React, { useEffect } from 'react';
import { CssBaseline, ThemeProvider } from '@material-ui/core';
import Head from 'next/head';
import { theme } from '../src/app/theme';

const App: React.FC<AppProps> = ({ Component, pageProps }) => {
    useEffect(() => {
        const jssStyles = document.querySelector('#jss-server-side');
        console.log(jssStyles?.parentElement?.removeChild(jssStyles));
        jssStyles?.parentElement?.removeChild(jssStyles);
    }, []);

    return (
        <React.Fragment>
            <Head>
                <title>My App</title>
                <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
            </Head>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <Component {...pageProps} />
            </ThemeProvider>
        </React.Fragment>
    );
};

export default App;

The solutions I’ve tried:

https://github.com/mui-org/material-ui/blob/0ff9cb54a9/examples/nextjs-with-typescript/README.md

https://github.com/hadnazzar/nextjs-with-material-ui/blob/master/README.md

Also many from StackOverflow similar posts (though none of the answers helped, so please do not mark this as a duplicate).

Used packages versions:

     "@material-ui/core": "^4.12.3",
    "next": "11.1.2",
    "react": "17.0.2",

Is there anything that I’m missing here?

Метки: