简单的材料UI对话框示例具有不必要的滚动条

Question

我有一个简单的材料UI对话框，其中包含一个网格，它具有一个可以滚动几个像素的滚动条，即使屏幕足够大以包含整个内容。

>

      <Dialog open={isOpen} onClose={() => changeIsOpen(false)}>
        <DialogContent>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <TextField label="First Name" fullWidth />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField label="Last Name" fullWidth />
            </Grid>
            <Grid item xs={12}>
              <TextField label="Username" fullWidth />
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button
            color="secondary"
            variant="contained"
            onClick={() => changeIsOpen(false)}
          >
            Cancel
          </Button>
          <Button
            color="primary"
            variant="contained"
            onClick={() => changeIsOpen(false)}
          >
            OK
          </Button>
        </DialogActions>
      </Dialog>

此代码位于https://codesandbox.io/s/cool-cherry-or0r8供您查看。

我不想使用overflow: hidden，因为如果页面太小，则会有一个滚动条，这是正确的。(在这个玩具示例中不太可能发生3个字段，但在较大的对话框中很容易发生(。

我认为这个问题与flexbox和<Grid>使用的负边距之间的相互作用有关，但我无法完全解决。

Answer 1

更新：

DialogContent似乎是这里的罪魁祸首，我们可以简单地尝试用下面给出的<DialogContent/>替换CC_3

<div style={{ padding: 20, overflow: "scroll" }}>
  <Grid container spacing={3}>
    <Grid item xs={12} sm={6}>
      <TextField label="First Name" fullWidth />
    </Grid>
    <Grid item xs={12} sm={6}>
      <TextField label="Last Name" fullWidth />
    </Grid>
    <Grid item xs={12}>
      <TextField label="Username" fullWidth />
    </Grid>
  </Grid>
</div>;

---

无视此解决方案：

用以下内容替换DialogContent：

<DialogContent>
  <div style={{ overflow: "hidden", height: "100%", width: "100%" }}>
    <div
      style={{
        paddingRight: 17,
        height: "100%",
        width: "100%",
        boxSizing: "content-box",
        overflow: "scroll"
      }}
    >
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
          <TextField label="First Name" fullWidth />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField label="Last Name" fullWidth />
        </Grid>
        <Grid item xs={12}>
          <TextField label="Username" fullWidth />
        </Grid>
      </Grid>
    </div>
  </div>
</DialogContent>

演示：https：//codesandbox.io/s/09ng6

归功于此答案：https：//stackoverflow.com/a/16671476/7427111

Answer 2

材料UI的github中有一个解决方法。我认为它是一个热五个，仍然不是解决方案，但对我有用。

我的网格容器的问题是，在间距4上，渲染元件的边距为-16px。因此，您想用一些填充物来抵消该边距。

<div style={{ padding:8 }}>
  <Grid container spacing={4}>

这将解决问题。我使用了8px，因为间距4将呈现-16px的边距。希望将来能够在将来提供更好的解决方案。

在此处引用hotfix：https：//github.com/mui-org/material-ui/issues/7466https://material-ui.com/components/grid/#negation-margin