我完全懂你的痛点！有时候业务需求确实得跳出Material Design的默认框框，毕竟规范是死的场景是活的。正好我之前也遇到过类似需求，给你整理了一个基于MUI的可行方案：

核心思路 #

我们要覆盖MUI Dialog的默认样式逻辑：取消它“内容区单独滚动、操作栏固定”的行为，让整个Dialog容器（标题+内容+操作栏）作为一个整体滚动，同时保持水平垂直居中，并且设置最小上下边距避免贴屏。

具体实现代码 #

可以通过MUI的sx属性直接自定义样式，也可以抽离成CSS类，这里给出最直观的内联实现示例：

import { useState } from 'react';
import { Dialog, DialogContent, DialogTitle, DialogActions, Button } from '@mui/material';

// 封装自定义Dialog组件
const FullScrollDialog = ({ open, onClose, title, children }) => {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      // 核心样式修改
      sx={{
        '& .MuiDialog-container': {
          // 取消默认垂直居中，改用margin实现带边距的居中
          alignItems: 'flex-start',
        },
        '& .MuiDialog-paper': {
          // 最小上下边距，可根据需求调整数值
          margin: '24px',
          // 水平方向居中+响应式宽度
          maxWidth: '640px',
          width: '90%',
          marginLeft: 'auto',
          marginRight: 'auto',
          // 最大高度：屏幕高度减去两倍最小边距
          maxHeight: 'calc(100vh - 48px)',
          // 让整个Dialog容器滚动，而非仅内容区
          overflowY: 'auto',
        },
      }}
    >
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        {/* 这里放入你的超长内容，比如长表单、大段文本 */}
        {children}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>取消</Button>
        <Button onClick={onClose} variant="contained">确认</Button>
      </DialogActions>
    </Dialog>
  );
};

// 使用示例
const App = () => {
  const [dialogOpen, setDialogOpen] = useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <Button variant="contained" onClick={() => setDialogOpen(true)}>
        打开自定义模态框
      </Button>
      <FullScrollDialog
        open={dialogOpen}
        onClose={() => setDialogOpen(false)}
        title="超长内容测试"
      >
        {/* 模拟超长内容 */}
        {Array.from({ length: 60 }).map((_, idx) => (
          <p key={idx} style={{ lineHeight: '1.8' }}>
            这是第{idx + 1}行测试文本，用来模拟超出屏幕高度的内容。
          </p>
        ))}
      </FullScrollDialog>
    </div>
  );
};

export default App;

关键样式说明 #

• & .MuiDialog-container: 把默认的alignItems: center改成flex-start，这样才能通过margin: auto实现“带最小边距的居中”，而不是强制贴紧屏幕中间。
• & .MuiDialog-paper:
  • margin: 24px: 保证Dialog在任何屏幕下都有上下左右的留白，不会贴死边缘。
  • maxHeight: calc(100vh - 48px): 计算最大高度，减去两倍的最小边距，确保Dialog不会超出可视区域。
  • overflowY: auto: 当内容超长时，整个Dialog（包括标题和操作按钮）会一起滚动，完全符合你的需求。

小提示 #

如果需要更复杂的样式定制，比如不同屏幕尺寸下调整边距，可以用MUI的useMediaQuery钩子配合sx属性做响应式适配，保证移动端体验也没问题。

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