Encountering an issue with the initial load of the mobile app version; it seems that the CSS of my component covering the page is not loading correctly on the first screen load. However, when resizing to desktop and then switching back to mobile view, the styles display properly. I have observed that modifying the ID "__next" ensures that the desired styles remain on the page. However, the logic to check if the screen size is that of a mobile device in order to display a different icon is not working as expected. Refer to the images below for further clarification:
Without __next fix
With __next fix
Resize from desktop without fix
_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;