如何让Material UI Container组件实现全屏宽高自适应？

我尝试在React项目中使用Material UI的Container组件包裹整个页面，但是该组件自带的奇怪边距会挤压所有内容，实际效果如下：

我想要实现的全宽效果如下：

目前我没有找到说明如何修改Container组件宽度的相关资料，请问有没有可行的解决方案？我尝试将容器宽度设置为100vw但是CSS没有生效，我的代码如下：

////BUY PAGE
import React from 'react';

import Container from '@mui/material/Container';
import AppBar from '../../components/AppBar/AppBar';
import Footer from '../../components/Footer/Footer';

import './Buy.css';

const Buy = () => {
    return (
        <Container>
            <AppBar />
            <Footer />
        </Container>
    );
};

export default Buy;

////CSS
.buy-container {
    overflow-y: hidden;
    width: 100vw;
}

你设置的CSS没有生效有两个核心原因：

1. 你定义的.buy-container类没有绑定到Container组件上，样式完全没有作用到目标元素
2. MUI的Container组件默认自带最大宽度限制和左右内边距，仅设置width: 100vw没有覆盖这些默认属性

方法1：使用Container内置属性（推荐） #

直接修改Container的两个原生props即可实现全宽效果，无需额外编写CSS：

• 设置maxWidth={false}：取消组件默认的最大宽度限制
• 设置disableGutters={true}：移除组件默认的左右内边距

修改后的组件代码如下：

////BUY PAGE
import React from 'react';

import Container from '@mui/material/Container';
import AppBar from '../../components/AppBar/AppBar';
import Footer from '../../components/Footer/Footer';

import './Buy.css';

const Buy = () => {
    return (
        <Container maxWidth={false} disableGutters>
            <AppBar />
            <Footer />
        </Container>
    );
};

export default Buy;

方法2：使用自定义CSS类实现 #

如果需要通过自定义CSS控制样式，需要先绑定类名再覆盖默认属性：

1. 给Container组件绑定自定义类名：

<Container className="buy-container">

2. 修改CSS代码，覆盖默认的max-width和padding属性：

////CSS
.buy-container {
    overflow-y: hidden;
    width: 100vw;
    max-width: unset !important;
    padding: 0 !important;
}

内容的提问来源于stack exchange，提问作者Casey Cling