时间戳

首页 > 解决方案 > React Material-UI 模态宽度不起作用

css - React Material-UI 模态宽度不起作用

问题描述

我正在尝试增加对话框宽度以显示完整内容。但是，它只是在对话框中添加了一个水平滚动条，而没有扩展宽度。我可以看到 blur 属性已应用于大部分页面，那么为什么表单也不会随之扩展？任何帮助是极大的赞赏！

这是我的CSS：

infoModal: {
    backdropFilter: "blur(3px)",
    width: "90%"
  },
  modalBody: {
    width: 1000,
    display: 'flex', 
    flexDirection: 'column',
  },


<Dialog onClose={handleClose} open={open} className={classes.infoModal} fullWidth>
        <DialogContent className={classes.modalBody}>
</Dialog>
</DialogContent>

标签： cssreactjsmaterial-ui

解决方案

您必须覆盖CSS 规则名称类（在https://material-ui.com/api/dialog/dialog检查其 API 页面）。

请注意，您必须将类传递给classesprops 而不是className


const useDialogStyles = makeStyles({
    paper: {
        width: '800px'
    }
});

export function Component() {

    const dialogClasses = useDialogStyles();

    return (
        <Dialog classes={dialogClasses} open={true}>

        </Dialog>
    );
}

检查此沙箱以进行测试 https://codesandbox.io/s/change-dialog-width-vux95

推荐阅读