Next.js with MUI v4 styles flicker

First of all, sorry for my English.

I tried to setup correctly MUI v4 for Next.js but I’ve always styles flicker.

I’ve :

• Next: 10.0.5
• Material-ui/core: 4.9.14

And I use Material-UI's styling solution.

No solution found on the web can’t correct this behavior for now.

In my _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;

In my _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;

For example, in navbar component I’m doing :

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

But i’v always styles flicker in production when I reload page.

Anyone can help me please ?

Thanks !