MUI Modal无法适配屏幕：大JSON内容显示与滚动异常问题求助

你的问题出在Modal内容容器的居中方式和滚动属性配置上：当前用top: 50% + transform: translate(-50%, -50%)的居中逻辑，会让容器在内容过长时超出视口顶部，导致顶部内容被截断，且无法滚动到顶部；同时滚动属性没有配合合理的高度限制，无法正常触发滚动行为。

以下是具体修改方案：

关键调整点 #

• 替换居中逻辑，限制容器尺寸：移除基于top/left 50%的居中方式，改用边距或结合水平居中+高度限制的方式，确保容器不会超出屏幕范围。
• 配置正确的滚动属性：给内容容器设置垂直滚动（overflowY: 'auto'），并搭配maxHeight限制容器最大高度，触发滚动。
• 移除Modal组件上的多余滚动设置：MUI Modal本身负责背景层的滚动控制，滚动应该交给内部内容容器。

修改后的完整代码 #

const modal = (task_definition: string) => {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => { 
    setOpen(true);
  };
  const handleClose = () => setOpen(false);

  const style = {
    position: 'absolute' as 'absolute',
    // 设置上下左右边距，让容器自适应视口
    top: '2rem',
    left: '2rem',
    right: '2rem',
    bottom: '2rem',
    width: 'auto',
    bgcolor: '#333333',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
    // 开启垂直滚动，水平滚动适配超长JSON行
    overflowY: 'auto',
    overflowX: 'auto'
  };

  return (
    <div>
      <Button onClick={handleOpen}>Describe Task</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Task Definition Described
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }} component={'span'}>
               {prettyJson(task_definition)}
          </Typography>
        </Box>
      </Modal>
    </div>
  );
} 

可选：保持固定宽度的水平居中版本 #

如果你希望容器保持75%的固定宽度并水平居中，可以调整style为：

const style = {
  position: 'absolute' as 'absolute',
  top: '2rem',
  left: '50%',
  transform: 'translateX(-50%)',
  width: '75%',
  // 最大高度设为屏幕高度减去上下边距，避免超出视口
  maxHeight: 'calc(100vh - 4rem)',
  bgcolor: '#333333',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
  overflowY: 'auto',
  overflowX: 'auto'
};

这样修改后，Modal容器会被限制在视口范围内，内容超出时可以正常滚动到顶部，同时保持良好的适配效果。

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