对话框宽度material-ui next答案

【问题标题】：Dialog width material-ui next对话框宽度material-ui next
【发布时间】：2018-04-21 05:45:43
【问题描述】：

接下来我无法在 material-ui 中增加对话框宽度。它向 Dailog 添加了水平滚动条。接下来有什么方法可以增加 Material-ui 中 Dailog 的宽度吗？可以帮忙吗？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

非常适合我。问题已修复
很好的答案.. 非常感谢。

【解决方案2】：

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

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

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

这将使对话框 500px 变宽。

【讨论】：

或者只是 width: "500px" & maxWidth: "100%" 以在窗口小于给定宽度时保持响应

【解决方案3】：

根据Material-UI v1 documentation for Dialog，maxWidth 可能是您需要的。 implementation of the Dialog component 接受maxWidth 值['xs', 'sm', 'md', false] 的枚举列表。 fullWidth 属性也可用于利用全屏...可能在较小的屏幕上最有用。

您还可以使用style 的内联样式、JavaScript 关键字className 调整DOM 中的class、classes 属性来调整MUI 插入的类，从而获得幻想并覆盖样式，或者您甚至可以使用overrides 概念调整主题中的宽度值。 This is all laid out in the docs with some simple examples. 可能需要尝试几次才能针对您的自定义 CSS 并使其按预期工作。

【讨论】：