使用 material UI 中的 Grid 组件移除边距以获得全高

Question

正如在此 codesandbox 中所见，我可以使用 100vh 作为 height 值将网格容器设置为全高，但是用户代理似乎添加了一个8px 到正文的边距，我还没有找到有效的方法来删除它。

<Box sx={{ flexGrow: 1 }}>
  <Grid container spacing={2} sx={{ height: "100vh" }}>
    <Grid item xs={4} sx={{ backgroundColor: "red" }} />
    <Grid item xs={8} sx={{ backgroundColor: "blue" }} />
  </Grid>
</Box>

有什么建议吗？

Answer 1

记得添加 <CssBaseLine /> 以重置默认边距和填充。

import { CssBaseline } from "@mui/material";

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <CssBaseline/> 
    <Demo />
  </StyledEngineProvider>,
  document.querySelector("#root")
);

Material-UI的网格使用负边距来调整间距。这就是为什么 Grid 的父级应该有填充来“修复”负边距。

<Box paddingTop={2} sx={{ flexGrow: 1 }}>
  <Grid container spacing={2} sx={{ height: "100vh" }}>
    <Grid item xs={4} sx={{ backgroundColor: "red" }} />
    <Grid item xs={8} sx={{ backgroundColor: "blue" }} />
  </Grid>
</Box>

使用 material UI 中的 Grid 组件移除边距以获得全高

Remove margins to get full height using Grid component in material UI

css

grid

responsive-design

material-ui

responsive