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

As it can be seen in this codesandbox, I can set the grid container to full height using 100vh as the height value, however the user agent seems to add a margin of 8px to the body and I haven't found a way to remove it that works.

<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>

Any suggestions?

CodePudding user response：

Remember to add <CssBaseLine /> to reset default margins and paddings.

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

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

Material-UI's Grid uses negative margins for adjusting the spacing. That's why Grid's parent should have padding that will "fix" that negative margin.

<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>