如何自定义Material UI Dialog模态组件的全屏高度避免遮挡导航栏

方案1：通过sx属性直接覆盖全屏弹窗样式（适配MUI v5+） #

这是最便捷的实现方式，核心逻辑是修改全屏Dialog的默认顶部定位，同时调整弹窗内容容器高度为视口高度减去导航栏高度：

import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme, Dialog } from '@mui/material';

function MyComponent() {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
  // 替换为你实际项目中的导航栏高度
  const NAV_BAR_HEIGHT = '64px';

  return (
    <Dialog
      fullScreen={fullScreen}
      sx={fullScreen ? {
        top: NAV_BAR_HEIGHT,
        height: `calc(100vh - ${NAV_BAR_HEIGHT})`,
        '& .MuiDialog-paper': {
          height: `calc(100vh - ${NAV_BAR_HEIGHT})`,
          maxHeight: `calc(100vh - ${NAV_BAR_HEIGHT})`
        }
      } : {}}
    >
      {/* 你的弹窗内容 */}
    </Dialog>
  )
}

注意：代码中默认的64px是MUI桌面端AppBar的默认高度，如果你自定义过导航栏高度，或者需要适配移动端不同的导航栏高度，替换为对应数值即可。

方案2：通过PaperProps/slotProps自定义内容容器 #

如果你使用的是MUI v4版本，可以通过PaperProps传入样式：

<Dialog
  fullScreen={fullScreen}
  style={fullScreen ? { top: '64px' } : {}}
  PaperProps={fullScreen ? {
    style: {
      height: 'calc(100vh - 64px)',
      maxHeight: 'calc(100vh - 64px)'
    }
  } : {}}
>
  {/* 弹窗内容 */}
</Dialog>

MUI v5版本也可以用slotProps的写法统一管理子组件样式：

<Dialog
  fullScreen={fullScreen}
  sx={fullScreen ? { top: '64px' } : {}}
  slotProps={{
    paper: fullScreen ? {
      sx: {
        height: 'calc(100vh - 64px)',
        maxHeight: 'calc(100vh - 64px)'
      }
    } : {}
  }}
>
  {/* 弹窗内容 */}
</Dialog>

方案3：自定义断点样式（无需使用fullScreen属性） #

如果需要更灵活的样式控制，你也可以放弃官方的fullScreen属性，自己实现小屏下的满屏效果，可调整空间更大：

const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

<Dialog
  fullWidth
  maxWidth={isSmallScreen ? false : 'sm'}
  sx={{
    ...(isSmallScreen && {
      top: '64px',
      '& .MuiDialog-paper': {
        margin: 0,
        width: '100%',
        height: 'calc(100vh - 64px)',
        maxHeight: 'calc(100vh - 64px)',
        borderRadius: 0
      }
    })
  }}
>
  {/* 弹窗内容 */}
</Dialog>

内容的提问来源于stack exchange，提问作者Jack Joseph