如何使材料 ui 容器具有全宽和全高？答案

【问题标题】：How do I make material ui container have full width and height?如何使材料 ui 容器具有全宽和全高？
【发布时间】：2022-01-11 06:26:20
【问题描述】：

我正在尝试将 React 项目中的页面包装在材质 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;
}

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

在更改断点之前，您应该避免设置自定义容器宽度。

否则，您可以使用自定义 div 元素或Box 组件。

// makeStyles
const useStyles = makeStyles(() => ({
  root: {
    height: '100%',
    overflow: 'hidden',
    width: '100%'
  },
}));

// styled
const LayoutContainer = styled('div')(() => ({
  height: '100%',
  overflow: 'hidden',
  width: '100%'
}));

【讨论】：

【解决方案2】：

我会看看全局 css 变量以覆盖标准 (see here)：

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

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

仅供参考 - 我从“root”下的 Container portion of the docs 获得了全局 css 名称，以防您没有看到它。

【讨论】：