如何为Material-UI的Modal启用滚动？能否实现scroll='paper'的Dialog效果？

核心实现思路 #

要达到和Dialog的scroll='paper'一致的效果，关键是让Modal的内容容器成为独立的可滚动区域，同时限制Modal的最大高度（基于视口高度），确保内容过长时仅内容区域出现滚动条，Modal的其他元素（如头部、底部按钮）保持固定。

具体实现方案 #

方法1：使用Material-UI内置组件快速实现 #

通过Box组件配合内联样式，直接构建带滚动的Modal结构：

import Modal from '@mui/material/Modal';
import Box from '@mui/material/Box';
import React from 'react';

// Modal外层容器样式
const modalWrapperStyle = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 450,
  maxHeight: '85vh',
  bgcolor: 'background.paper',
  borderRadius: 2,
  boxShadow: 24,
  p: 3,
  overflow: 'hidden',
};

// 可滚动内容容器样式
const scrollContentStyle = {
  overflowY: 'auto',
  maxHeight: 'calc(85vh - 48px)', // 减去外层内边距高度，避免滚动条覆盖内容
};

export default function ScrollableModal() {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>打开带滚动的Modal</button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        aria-labelledby="modal-title"
        aria-describedby="modal-content"
      >
        <Box sx={modalWrapperStyle}>
          {/* 固定头部 */}
          <h2 id="modal-title">长内容展示Modal</h2>
          {/* 可滚动内容区域 */}
          <Box sx={scrollContentStyle}>
            <p id="modal-content">
              {Array.from({length: 60}).map((_, idx) => (
                <p key={idx}>这是第{idx + 1}行测试文本，用于验证滚动功能。当内容超出容器高度时，会自动显示垂直滚动条，头部和底部按钮保持固定。</p>
              ))}
            </p>
          </Box>
          {/* 固定底部按钮 */}
          <button onClick={() => setOpen(false)} style={{ marginTop: 16 }}>关闭</button>
        </Box>
      </Modal>
    </div>
  );
}

方法2：自定义Styled组件实现复用 #

如果需要在多个地方复用该滚动Modal，可以用@emotion/styled创建自定义组件：

import Modal from '@mui/material/Modal';
import styled from '@emotion/styled';
import React from 'react';

const StyledModalWrapper = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  max-height: 85vh;
  background-color: ${props => props.theme.palette.background.paper};
  border-radius: 8px;
  box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
  padding: 24px;
  overflow: hidden;
`;

const ScrollableContent = styled.div`
  overflow-y: auto;
  max-height: calc(85vh - 72px); // 调整数值适配自定义内边距和头部高度
  margin: 16px 0;
`;

export default function ReusableScrollableModal() {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>打开复用型滚动Modal</button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        aria-labelledby="reusable-modal-title"
      >
        <StyledModalWrapper>
          <h2 id="reusable-modal-title">复用型滚动Modal</h2>
          <ScrollableContent>
            {Array.from({length: 60}).map((_, idx) => (
              <p key={idx}>这是第{idx + 1}行复用组件测试文本，滚动逻辑已封装，可直接在项目中重复调用。</p>
            ))}
          </ScrollableContent>
          <button onClick={() => setOpen(false)}>关闭</button>
        </StyledModalWrapper>
      </Modal>
    </div>
  );
}

关键细节说明 #

• maxHeight: '85vh'：将Modal的最大高度限制为视口高度的85%，避免Modal撑满整个屏幕。
• overflowY: 'auto'：仅当内容高度超过容器时，才显示垂直滚动条，保持UI简洁。
• calc()计算滚动容器高度：通过减去外层容器的内边距、头部高度等，确保滚动区域不会被其他元素挤压，内容显示完整。

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