对话框宽度 Material UI

Question

我无法在Material UI中增加对话框的宽度。这会在对话框中添加水平滚动条。有没有办法在Material UI中增加对话框的宽度？有人可以帮忙吗？

- Siddu hadapad

Answer 1

在您的Dialog组件中添加两个属性fullWidth和maxWidth="md"，如下所示：

<Dialog
  {...your_other_props}
  fullWidth
  maxWidth="sm"
>
  {/* Your dialog content */}
</Dialog>

你可以根据需求将 md 更改为 sm、xs、lg 和 xl。

- Siddu hadapad

---

完美适合我。问题已解决。 - Phares

非常好的答案。非常感谢。 - Lalit Narayan Mishra

Answer 2

正如@mike部分提到的，您可以将样式传递给特定的子组件（请参见Dialog中可用的组件此处），对话框的主体是一个Paper组件，因此如果您设置Paper的宽度，对话框的宽度将为该宽度。

//Set the styles
const useStyles = makeStyles(() => ({
  paper: { minWidth: "500px" },
}));

//Add the class to Paper
 <Dialog classes={{ paper: classes.paper}}>

这将使对话框的宽度为500px。

- Moses Schwartz

---

或者只需将width设置为"500px"，将maxWidth设置为"100%"，以保持在窗口小于给定宽度时的响应性。 - Corrodian

Answer 3

如果您不想使用样式，以下是我实现它的方法。

<Dialog
   onClose={handleCloseModal}
   aria-labelledby="customized-dialog-title"
   open={open}
    sx={{
      "& .MuiDialog-container": {
        "& .MuiPaper-root": {
          width: "100%",
          maxWidth: "500px",  // Set your width here
        },
      },
    }}
  >
  
  <DialogContent />

</Dialog>

- axelmukwena

---

对我来说，这是最好的解决方案。谢谢！ - RuntimeError

对我来说，最好的解决方案也是如此。 - James Prentice

我认为，默认情况下，Mui应该具备这个功能。 - Luis

Answer 4

根据 Material-UI v1 对话框文档，您可能需要使用 maxWidth 属性。对话框组件的 实现 接受一个枚举列表的 maxWidth 值 ['xs', 'sm', 'md', false]。此外，还可利用 fullWidth 属性以充分利用全屏幕，这在较小的屏幕上最有用。

您还可以使用内联样式的 style、JavaScript 关键字 className 调整 DOM 中的 class、classes 属性调整 MUI 插入的类，甚至可以使用 overrides 概念调整主题中的宽度值。 文档中提供了一些简单的示例。 定制 CSS 并使其按预期工作可能需要尝试几次。

- Mike Mathew

Answer 5

您可以通过添加PaperProps属性来实现此操作

 <Dialog
  {...your props}
  PaperProps={{
    sx: {
      width: "100%",
      maxWidth: "720px!important",
    },
  }}>

您可以根据需要更改maxWidth。

- Niku Alla

---

目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 6

当我面临这个问题时，我尝试了上述所有方法。为了使所需数据更好地适应，我不得不调整对话框的大小。

很遗憾，上述选项对我没有起作用。我的意思是fullWidth maxWidth='md'可以使用，但对我来说太宽了...

最终我使用的是root类：

<Dialog open={open} className={classes.root}>

我在我的样式中进行了覆盖，像这样：

export default () => ({
  root: {
    '& .MuiPaper-root': {
      width: '100%',
      maxWidth: '650px', // Set your width here
    },
  },
});

如果有人遇到同样的问题，这对我来说是一个有效的解决方案。

- David Kiss

Answer 7

在我的情况下，添加一个带有 overflowY: "clip" 样式属性的代码可以解决问题。

<Dialog fullWidth>
  <DialogTitle>Title</DialogTitle>
  <DialogContent
     style={{overflowY: "clip"}}
  >
  ...
  </DialogContent>
</Dialog>

完全透明... 我对Material-UI的了解只够危险。

- TimA

Answer 8

也许这可以帮助：

<Dialog
    fullWidth={fullWidth}
    sx={{
      '& .css-4ygzoj-MuiPaper-root-MuiDialog-paper': {
        maxWidth: '777px', /// edit here
      },
    }}
    open={open}
    onClose={handleClose}
    scroll="paper"
  >

- nurhamsah

---

那个id ".css-4ygzoj-[...]" 是什么？它可能会改变吗？ - undefined