如何让 Dialog 在 Material-UI 中占据 80% 的屏幕？

Question

我正在使用 Material-UI Dialog，我想让它占据屏幕的 80%。理想情况下，我想要这样的东西。

我正在对 Dialog 应用边距，但它没有按预期工作。

Answer 1

对于较旧的 material-ui版本，如 0.20.0：

<Dialog
   title="Dialog With 80% Width"
   modal={true}
   contentStyle={{
      width: '80%',
      maxWidth: 'none',
   }}
   open={true}
>
   This dialog spans the 80% width of the screen.
</Dialog>

在material-ui V1 中使用这些道具可能会帮助您满足您的需求

fullWidth={true}
maxWidth = {'md'}

这是Dialog 组件的示例和其他道具，或者以更高级的方式，您可以查看Dialog 组件代码，看看那里发生了什么。