带有 MUI v4 样式闪烁的 Next.js

如何解决带有 MUI v4 样式闪烁的 Next.js

首先，对不起我的英语。

我尝试为 Next.js 正确设置 MUI v4，但我总是样式闪烁。

我已经：

下一个：10.0.5
Material-ui/core：4.9.14

我使用 Material-UI 的样式解决方案。

目前在网络上找不到任何解决方案无法纠正此行为。

在我的 _app.js 中：

import { useEffect } from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import { AuthProvider } from '@lib/useAuth';
import DefaultLayout from '@layouts/DefaultLayout';
import theme from '@assets/styles/jss/theme';
import '@assets/styles/scss/toastify.scss';

const MyApp = ({ Component,pageProps }) => {
  const Layout = Component.Layout || DefaultLayout;

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssstyles = document.querySelector('#jss-server-side');
    if (jssstyles) {
      jssstyles.parentElement.removeChild(jssstyles);
    }
  },[]);

  return (
      <ThemeProvider theme={theme}>
        <AuthProvider>
          <CssBaseline />
          <Layout>
            <Component {...pageProps}> </Component>
          </Layout>
        </AuthProvider>
      </ThemeProvider>
  );
};

export default MyApp;

在我的 _document.js 中：

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

class MyDocument extends Document {
  render() {
    return (
      <Html lang="fr">
        <Head>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getinitialProps = async (ctx) => {
  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()],};
};

export default MyDocument;

例如，在我正在做的导航栏组件中：

import { makeStyles } from '@material-ui/core/styles';
import styles from '@assets/styles/jss/components/navbarStyle';

const useStyles = makeStyles(styles,{ name: 'MuiCustomNavbar' });

const Navbar = () => {
  const classes = useStyles();
  […]
}

但是当我重新加载页面时，我在制作中总是样式闪烁。

有人可以帮我吗？

谢谢！