React Material UI 网格超出全屏大小

Question

使用Material UI Grid时，它会生成过大的全屏幕，并产生水平滚动条，如何修复？

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

生成类似于水平滚动条的内容

- Soleil

---

还不太清楚您的问题。能否详细说明一下，并附上您已经编写的代码？ - Tholle

Answer 1

我也遇到了同样的问题。后来发现使用 minHeight: "100vh" 可以解决这个问题。

root: {
  minHeight: "100vh",
}

我在这里找到了这个解决方案

下面的代码也可以实现全屏：

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

我在这里找到了解决方案

- Erika Lira

Answer 2

经过多次测试，我解决了这个问题，将间距从24改为16，因为子元素只有12，希望这能帮助到其他人。

  <Grid container spacing={16}>

没有水平滚动条

- Soleil