My Nextjs app is causing some issues with styling when I disable SSR to connect to Metamask using the window object. Specifically, the Navbar title style changes when SSR is disabled and the dev server is restarted:
With SSR enabled: https://i.sstatic.net/CPnaM.png
With SSR disabled: https://i.sstatic.net/NAYfa.png
Below is a snippet of my _app.js:
import dynamic from "next/dynamic";
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
import { MoralisProvider } from "react-moralis";
import NoSSR from "./NoSSR";
import '../styles/globals.css'
const darkTheme = createTheme({
palette: {
mode: 'dark',
background:{
dark:'#0a0b0d',
}
},
});
function MyApp({ Component, pageProps }) {
return (
<NoSSR>
<ThemeProvider theme={darkTheme}>
<CssBaseline/>
{/* <ThirdwebProvider desiredChainId={ChainId.Rinkeby}>
</ThirdwebProvider> */}
<MoralisProvider serverUrl={'https://124a8yab5jee.usemoralis.com:2053/server'} appId='Seyf64uxlgqgxt5Y75p1M4Hq21CC5osXcvj4T8Yw'>
<Component {...pageProps} />
</MoralisProvider>
</ThemeProvider>
</NoSSR>
)
}
export default MyApp;
NoSSR.js:
import dynamic from 'next/dynamic'
import React from 'react'
const NoSsr = props => (
<React.Fragment>{props.children}</React.Fragment>
)
export default dynamic(() => Promise.resolve(NoSsr), {
ssr: false
})
I'm unsure why this issue is occurring - could it be a bug in Nextjs or related to my use of the Material UI library?