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

IT技术 css reactjs material-ui
2021-05-13 16:49:43

我有一个包含网格的简单 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>，但我无法完全解决。

2个回答

更新：

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 : //stackoverflow.com/a/16671476/7427111

在材料 ui 的 github 中发布了一个解决方法。我认为它是一个修补程序，仍然不是解决方案，但它对我有用。

我的 Grid 容器的问题在于，在间距为 4 时，渲染元素的边距为 -16px。所以你想用一些填充来抵消那个边距。

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

这将解决问题。我使用 8px 因为间距 4 将呈现 -16px 边距。希望 Material-UI 合作者在未来提供更好的解决方案。

参考这里的修补程序：https : //github.com/mui-org/material-ui/issues/7466 https://material-ui.com/components/grid/#negative-margin

其它你可能感兴趣的问题
上一篇Typescript 如何声明子类类型？ 下一篇使用 redux-persist 保存和检索状态 - React Native