How to make a footer with React and Material UI - css

Question

I'm trying to make a footer (non-sticky) that appears on every page of my Next.js app. I'm using Material UI for styling.
This is the component that defines the layout for every page of my app:
import React from "react";
import NavBar from "./NavBar";
import Header from "./Header";
import styles from "../styles/Layout.module.css";
import { Container } from "#mui/material";
import Footer from "./Footer";
export default function Layout(props) {
return (
<>
<NavBar></NavBar>
<Container className={styles.container}>
<main className={styles.main}>
<Header />
{props.children}
<Footer />
</main>
</Container>
</>
);
}
The Container component centers its children on the page. The footer is a different color than the background of the pages, so I want the footer background to fill the entire viewport, but the footer content to remain centered with the rest of the page content
I initially tried to do this by translating the content:
import React from "react";
const footerHeight = 300;
const footerEltMarginTop = 15;
const div1Style = {
width: "100vw",
height: `${footerHeight + footerEltMarginTop}px`,
backgroundColor: "blue",
};
const div2Style = {
transform: `translate(0px, -${footerHeight}px)`,
color: "white",
width: "100%",
height: `${footerHeight}px`,
marginTop: `${footerEltMarginTop}px`,
};
export default function Footer() {
return (
<>
<div style={div1Style}></div>
<div style={div2Style}>
<div>footer content</div>
</div>
</>
);
}
The problem was that this left whitespace of height footerHeight below the footer. I instead tried again by making the positions of the footer background and footer content have absolute positoning:
import React from "react";
const footerHeight = 300;
const footerEltMarginTop = 15;
const div1Style = {
width: "100vw",
height: `${footerHeight + footerEltMarginTop}px`,
backgroundColor: "blue",
marginTop: "30px",
position: "absolute",
};
const div2Style = {
width: "100%",
position: "absolute",
color: "white",
height: `${footerHeight}px`,
marginTop: `${footerEltMarginTop}px`,
};
export default function Footer() {
return (
<div style={{width: "100%"}}>
<div style={div1Style}></div>
<div style={div2Style}>
<div>footer content</div>
</div>
</div>
);
}
The problem with this is that the footer background for some reason has whitespace to the left, and does not take up the full viewport.
Does anyone know how one might go about accomplishing this with React + Material UI? Any advice is greatly appreciated! Thanks!

Answer 1

There could be many approaches depending on the styles of Container and main.
Assuming that the goal is to have Footer fill the width of the viewport, perhaps try add disableGutters and maxWidth={false} to Container, so that its default spacing on both sides are disabled, and can extent to the full width of viewport.
Also consider to add CssBaseline to the main Layout as it contains CSS reset recommended by MUI, but this is optional in the use case.
Live demo of a basic example: stackblitz
import CssBaseline from '#mui/material/CssBaseline';
function Layout(props) {
return (
<>
<CssBaseline />
<NavBar></NavBar>
<Container maxWidth={false} disableGutters>
<main>
<Header />
{props.children}
<Footer />
</main>
</Container>
</>
);
}