React Material UI Grid超大全屏

Question

与Material UI Grid一起使用时，它的全屏尺寸过大并生成水平滚动条，如何解决？

const styles = theme => ({ root: { flexGrow: 1,}, paper: {  padding: theme.spacing.unit * 2,textAlign: 'center',color: theme.palette.text.secondary,},});

生成为horizontal scroll bar

Answer 1

我有同样的问题。找出使用minHeight: "100vh"可以解决此问题

root: {
  minHeight: "100vh",
}

where i found this solution

波纹管也起作用：

root: {
  position: 'fixed',
  width: '100%',
  height: '100%',
  left: 0,
  top: 0,
  zIndex: 10,
}

where i found this solution

Answer 2

经过过多测试，我解决了这个问题，将间距24更改为16，因为孩子有12，希望这对某人有帮助

  <Grid container spacing={16}>

Without horizontal scroll bar