I am using Typescript, Nextjs, and Joy/Material UI. I have a strange white box on my page in dark mode. Here's a screen shot of the problem:
Here is the code for the footer:
import BottomNavigation from "@mui/material/BottomNavigation";
export default function Footer() {
return (
<BottomNavigation style={{ color: "gray", position: "sticky", bottom: 0, paddingTop: 50 }}>
<center>Everything here is Copyright © {new Date().getFullYear()} by Nick Hodges - All Rights Reserved</center>
</BottomNavigation>
);
}
Here is the layout:
import Box from "@mui/joy/Box";
import Grid from "@mui/joy/Grid";
import NavBar from "./NavBar";
import { PropsWithChildren } from "react";
import { siteMetaData } from "../lib/siteMetaData";
import Head from "next/head";
import { useRouter } from "next/router";
import Footer from "./Footer";
export default function Layout(props: PropsWithChildren) {
const router = useRouter();
return (
<>
<Head>
<title>{siteMetaData.title}</title>
<meta name="robots" content="follow, index" />
<meta name="description" content={siteMetaData.description} />
<meta
property="og:url"
content={`${siteMetaData.siteUrl}${router.asPath}`}
/>
<meta property="og:type" content="blog" />
<meta property="og:site_name" content={siteMetaData.title} />
<meta property="og:description" content={siteMetaData.description} />
<meta property="og:title" content={siteMetaData.title} />
<meta
property="og:image"
content={`${siteMetaData.siteUrl}${siteMetaData.ogImage}`}
key={siteMetaData.ogImage}
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={siteMetaData.title} />
<meta name="twitter:description" content={siteMetaData.description} />
<meta
name="twitter:image"
content={`${siteMetaData.siteUrl}${siteMetaData.ogImage}`}
/>
<link
rel="canonical"
href={`${siteMetaData.siteUrl}${router.asPath}`}
/>
</Head>
<Grid
container
spacing={2}
sx={{
maxWidth: "1000px",
display: "flex",
flexGrow: 1,
flexDirection: { xs: "column", md: "row" },
mx: "auto",
mt: { xs: "2rem", md: "6rem" },
p: "2rem",
}}
>
<Grid xs={12} md={4}>
<NavBar />
</Grid>
<Grid xs={12} md={8}>
<Box>{props.children}</Box>
<Footer />
</Grid>
</Grid>
</>
);
}
The theme is quite simple:
import { extendTheme } from "@mui/joy/styles";
const theme = extendTheme({
fontFamily: {
body: "'Public Sans', var(--joy-fontFamily-fallback)",
},
});
export default theme;
I cannot get rid of the white box, and I don't really have any good ideas why it is there.
Can someone point me in the right direction?
Happy to provide more information if needed. Thank you.