对话框宽度材料-ui接下来

Question

我无法在材质ui中增加对话框宽度。它为Dailog添加了水平滚动条。有没有办法在材料ui下增加Dailog的宽度？可以帮忙吗？

Answer 1

最后，以下代码适用于我。

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

Answer 2

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

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

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

这将使对话框500px变宽。

Answer 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并使其按预期工作。