对话框宽度材质 UI

Question

我无法增加材质UI中的对话框宽度。它将水平滚动条添加到对话框。有没有办法增加材料UI中Dailog的宽度？有人可以帮忙吗？

Answer 1

在

Dialog组件中添加两个 props fullWidth 和 maxWidth="md"，如下所示：

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

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

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宽。

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>

Answer 4

根据 Dialog 的 Material-UI v1 文档，maxWidth prop 可能是你需要的。对话框组件的实现采用['xs', 'sm', 'md', false] maxWidth值的枚举列表。fullWidth道具也可用于利用全屏...可能在较小的屏幕上最有用。

您还可以使用带有style的内联样式，JavaScript关键字className来调整DOM中的class，classes道具来调整MUI插入的类，或者您甚至可以使用overrides概念调整主题中的宽度值。这些都通过一些简单的示例在文档中列出。可能需要尝试几次才能定位自定义 CSS 并使其按预期工作。

Answer 5

您可以通过添加 PaperProps 属性来执行此操作

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

您可以根据需要更改maxWidth。

Answer 6

当我遇到这个问题时，我尝试了上述所有方法。我不得不调整对话框的大小才能很好地适应所需的数据。

不幸的是，上述选项对我不起作用。我的意思是全宽最大宽度='md'正在工作，但它对我来说太宽了......

我最终使用的是根类：

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

在我的风格中，我像这样覆盖：

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

以防万一有人面临同样的问题，这对我来说是一个可行的选择。

Answer 7

这可能

有所帮助：

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

Answer 8

添加样式属性对我有用overflowY: "clip"

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

全面披露...我对Material-UI的了解足以引起危险。