React中如何设置Material UI Dialog宽度超过900px且不全屏

实现方案 #

MUI 内置的 maxWidth="lg" 预设默认最大宽度为900px，要突破该限制可参考以下几种方案：

方案1：内联样式临时调整（推荐单次使用场景）

直接通过Dialog组件的sx属性覆盖默认样式，无需修改全局配置：

• 开启fullWidth属性保证对话框宽度可以自适应拉伸
• 设置maxWidth={false}关闭MUI默认的宽度限制
• 自定义对话框Paper容器的宽度规则

import Dialog from '@mui/material/Dialog';

<Dialog
  open={open}
  onClose={handleClose}
  fullWidth={true}
  maxWidth={false}
  sx={{
    '& .MuiDialog-paper': {
      maxWidth: '1200px', // 自定义所需最大宽度，支持px、vw等单位
      width: '90%' // 小屏设备自适应宽度，避免溢出
    }
  }}
>
  {/* 对话框内容 */}
</Dialog>

方案2：全局修改主题配置（推荐项目统一规范场景）

如果需要项目内所有maxWidth="lg"的Dialog都使用自定义宽度，可直接修改MUI主题配置：

// 主题配置文件 如theme.js
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiDialog: {
      styleOverrides: {
        paper: {
          '&.MuiDialog-paperSizeLg': {
            maxWidth: '1200px' // 全局修改lg尺寸Dialog的最大宽度
          }
        }
      }
    }
  }
});

修改后项目中所有设置maxWidth="lg"的Dialog都会自动应用新的宽度规则，不需要额外修改组件属性。

方案3：封装自定义Dialog组件（推荐高频复用场景）

如果需要在多处使用同一自定义宽度的Dialog，可以用styled封装通用组件：

import { styled } from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';

// 封装宽度为1200px的自定义Dialog
const WideDialog = styled(Dialog)(({ theme }) => ({
  '& .MuiDialog-paper': {
    maxWidth: '1200px',
    width: '90%'
  }
}));

// 业务组件内直接调用
<WideDialog open={open} onClose={handleClose} fullWidth>
  {/* 对话框内容 */}
</WideDialog>

内容的提问来源于stack exchange，提问作者Shakya Karunathilake