我正在尝试制作一个页脚（非粘性），它出现在我的Next.js应用程序的每一页上。我正在使用Material UI进行样式设置。
这是定义应用程序每个页面布局的组件：

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>
    </>
  );
}

Container组件将其子组件居中放置在页面上，页脚的颜色与页面背景的颜色不同，因此我希望页脚背景填充整个视口，但页脚内容与页面内容的其余部分保持居中放置
我最初尝试通过翻译内容来做到这一点：

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>
   </>
  );
}

问题是这在页脚下面留下了高度为footerHeight的空白。我改为再次尝试，使页脚背景和页脚内容的位置具有绝对定位：

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>
  );
}

这样做的问题是，页脚背景由于某种原因在左侧有空白，并且没有占据整个视口。

有人知道如何使用React + Material UI来实现这一点吗？任何建议都非常感谢！谢谢！