简单的Material UI对话框示例出现了不需要的滚动条

Question

简单的Material UI对话框示例出现了不需要的滚动条

6

我有一个简单的Material 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>使用的负边距之间的交互有关，但我无法完全解决它。

- user5090812

“spacing”是必要的吗？你可以从Grid容器中删除该属性来消除滚动条。另一种方法是为Grid容器设置一个最小高度值作为根样式。 - Ariel Salem

我明白了，所以去掉“spacing”确实解决了问题。但是这样一来，我的名字和姓氏字段会连在一起（如果页面在sm断点或更高的位置）。 - user5090812

2个回答

3

在Material UI的Github上发布了一个解决方法。我认为它是一个临时修补，而不是解决方案，但对我有效。

我的Grid容器的问题在于，在间距4上，呈现的元素具有-16px的边距。因此，您需要使用一些填充来抵消该边距。

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

这样做就可以了。我使用了8像素，因为间距4会呈现-16像素的边距。希望Material-UI合作者将来能提供更好的解决方案。

参考热修复：https://github.com/mui-org/material-ui/issues/7466 https://material-ui.com/components/grid/#negative-margin

- Manny Alvarado

谢谢，这也是我的问题，尽管我不得不使用16的填充来适应-16的边距，8仍然会溢出。 - hurlbz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dhaval Jardosh · Accepted Answer

更新：

看起来DialogContent是罪魁祸首，我们可以尝试将<DialogContent/>替换为下面的<div/>

<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://dev59.com/j2Qn5IYBdhLWcg3wpYj0#16671476