Next.js移动端首次加载CSS异常及适配逻辑失效问题

我在Next.js项目中碰到了移动端首次加载异常的问题：页面容器组件的CSS在初始加载时未正确生效，但将屏幕尺寸切换为桌面端再切回移动端后，样式显示正常。尝试修改__next的ID能保留所需样式，但判断屏幕尺寸以显示对应移动端图标的逻辑无法正常工作。

未修复__next时 #

修复__next后 #

未修复时从桌面端调整尺寸后 #

_document.tsx #

/* eslint-disable @next/next/no-sync-scripts */
import React from 'react'
import Document, { Html, Main, NextScript, Head, DocumentContext } from 'next/document'

class CustomDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  };

  render() {
    return (
      <Html lang="pt-br" id="html">
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com"/>
          <link rel="preconnect" href="https://fonts.gstatic.com"/>
          <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
          <link rel="icon" type="image/png" href="/favicon/favicon.ico" />
          <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
          <link rel="stylesheet" href="node_modules/react-github-contribution-calendar/default.css" type="text/css" />
          <script src="https://kit.fontawesome.com/1e2ddc5739.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default CustomDocument

_app.tsx #

import Head from 'next/head';
import { AuthProvider } from '../utils/contexts/AuthContext';
import GlobalStyle from '@/components/ui/styles/globalStyles';
import CssBaseline from '@mui/material/CssBaseline';

import { CacheProvider } from '@emotion/react';
import { createEmotionCache } from '@/utils/createEmotionCache';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { ModalProvider } from '@/utils/contexts/ModalContext';
import { ptBR } from '@mui/x-date-pickers/locales';
import { pt } from 'date-fns/locale'
import { RecoilRoot } from 'recoil';

const clientSideEmotionCache = createEmotionCache();

interface CustomAppProps {
  Component: any;
  pageProps: any;
  emotionCache: any;
}

const App = ({ Component, pageProps, emotionCache = clientSideEmotionCache }: CustomAppProps) => {
  const getLayout = Component.getLayout ?? ((page: any) => page);
  const locale = ptBR.components.MuiLocalizationProvider.defaultProps.localeText;
  return (
    <RecoilRoot>
      <AuthProvider>
        <CacheProvider value={emotionCache}>
          <LocalizationProvider dateAdapter={AdapterDateFns} localeText={locale} adapterLocale={pt}>
            <ModalProvider>
              <Head>
                <title>
                  Blakbelt
                </title>
                <meta
                  name="viewport"
                  content="initial-scale=1, width=device-width"
                />
              </Head>
              <CssBaseline />
              <GlobalStyle />
              <ToastContainer />
              {getLayout(<Component {...pageProps} />)}
            </ModalProvider>
          </LocalizationProvider>
        </CacheProvider>
      </AuthProvider>
    </RecoilRoot>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者Guilherme Gonzalez