如何使 Material UI 容器具有完整的宽度和高度？

Question

我试图将 React 项目中的页面包装在 Material UI 容器中，但它用这些奇怪的边距挤压了我的所有内容。它看起来是这样的：

但我希望它看起来像这样全宽：

尚未找到任何其他资源来解释如何更改容器的宽度。有人有解决方法吗？我尝试将容器的宽度调整为 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;
}

Answer 1

您应该能够通过将maxWidth的 属性设置Container为 false 来获得您正在寻找的结果，例如：

<Container maxWidth={false}>
  <AppBar />
  <Footer />
</Container>

该maxWidth属性决定了max-width容器的属性。容器宽度随着屏幕尺寸的增加而增加。通过将其设置为false，您可以禁用该maxWidth属性。

多用户界面Container

Answer 2

您将需要向组件添加maxWidth={false}和disableGutters属性<Container/>。此外，您还应该包含<CssBaseline/>重置浏览器 CSS 的组件。

例子：

<>
    <CssBaseline />
    <Container maxWidth={false} disableGutters>
      {children}
    </Container>
</>

容器API

姓名	类型	默认	描述
最大宽度	'xs'、'sm'、'md'、'lg'、'xl'、假、字符串		确定容器的最大宽度。容器宽度随着屏幕尺寸的增加而增加。设置false为禁用maxWidth。
禁用装订线	布尔值	错误的	如果true，则删除左右填充。

Answer 3

我会看一下全局 css 变量来覆盖标准（请参阅此处）：

材料文档建议采用这种方式或使用样式覆盖，这可能是您的另一种选择。

.MuiContainer-root {
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

仅供参考 - 我从“root”下文档的容器部分获取了全局 css 名称，以防您没有看到它。