我試圖將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;

通過將Container的maxWidth屬性設置為false，您應該能夠得到您想要的結果，例如:

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

編輯: maxWidth屬性確定容器的最大寬度。容器的寬度隨著屏幕的大小而增加。通過將其設置為false，可以禁用maxWidth屬性。

https://mui.com/api/container/

您需要將maxWidth={false}和disableGutters屬性添加到& ltcontainer/>；組件。此外，您應該包括& ltCssBaseline/>組件重置瀏覽器的CSS。

示例:

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

容器API 名字 類型 默認 描述 最大寬度 xs '，' sm '，' md '，' lg '，' xl '，false，string 確定集裝箱的最大寬度。容器的寬度隨著屏幕的大小而增加。設置為false將禁用maxWidth。 禁用排水溝 彎曲件 錯誤的 如果為true，則刪除左右填充。 在更改斷點之前，您應該避免設置自定義容器寬度。

否則，您可以使用自定義div元素或Box組件。

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

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

我會使用& lt容器& gt在& ltBox & gt/& lt；Appbar & gt具有背景顏色的，例如:

<Box sx={{ bgcolor: 'black'}}>
  <Container>
    My content
  </Container>
</Box>

我想看看全局css變量來改寫標準(參見此處):

材料文件建議這樣做，或者使用樣式覆蓋，這可能是你的另一個選擇。

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

在那種情況下，“100%”對我來說很管用