如何在React Material UI模态弹窗中实现最小化按钮

步骤1：添加状态管理 #

在组件内部新增状态控制最小化状态：

import { useState } from 'react';

// 组件内部状态
const [isMinimized, setIsMinimized] = useState(false);

步骤2：添加最小化/恢复按钮 #

在弹窗的控制栏加入切换按钮（需先导入对应图标）：

// 导入MUI图标
import Minimize from '@mui/icons-material/Minimize';
import Maximize from '@mui/icons-material/Maximize';

// 修改原有控制按钮区域
{showCancel && (
  <div style={{ display: "flex", justifyContent: 'flex-end', gap: 8, width: 'auto'}}>
    <IconButton onClick={() => setIsMinimized(!isMinimized)}>
      {isMinimized ? <Maximize /> : <Minimize />}
    </IconButton>
    <IconButton onClick={handleClose}>
      <Cancel></Cancel>
    </IconButton>
  </div>
)}

步骤3：重构弹窗结构与样式 #

拆分模态框和最小化窗口的渲染逻辑，根据状态切换显示：

// 定义最小化窗口样式
const minimizedStyle = {
  position: 'fixed',
  bottom: 20,
  right: 20,
  width: 220,
  height: 80,
  backgroundColor: '#fff',
  borderRadius: 8,
  boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '0 16px',
  cursor: 'pointer',
  zIndex: 1300, // 与MUI Modal默认层级保持一致
};

// 原模态框样式保留
const modalStyle = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  backgroundColor: '#fff',
  borderRadius: 8,
  boxShadow: 24,
  padding: 24,
};

// 组件渲染部分
return (
  <>
    {/* 正常状态的模态框 */}
    <Modal
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
      open={open && !isMinimized}
      onClose={handleClose}
    >
      <div style={modalStyle} className={classes.paper}>
        {showCancel && (
          <div style={{ display: "flex", justifyContent: 'flex-end', gap: 8, width: 'auto'}}>
            <IconButton onClick={() => setIsMinimized(!isMinimized)}>
              <Minimize />
            </IconButton>
            <IconButton onClick={handleClose}>
              <Cancel></Cancel>
            </IconButton>
          </div>
        )}
        <Stepper activeStep={activeStep} orientation="vertical" />
      </div>
    </Modal>

    {/* 最小化状态的小窗口 */}
    {isMinimized && (
      <div 
        style={minimizedStyle} 
        onClick={() => setIsMinimized(false)}
      >
        <span>步骤弹窗（已最小化）</span>
        <Maximize />
      </div>
    )}
  </>
);

步骤4：完善状态联动 #

修改关闭函数，确保关闭弹窗时重置最小化状态：

const handleClose = () => {
  setOpen(false);
  setIsMinimized(false);
};

自定义调整说明 #

• 可以修改minimizedStyle里的bottom、right值，调整最小化窗口的位置（比如改成底部中间）
• 按需修改最小化窗口的尺寸、文案和样式
• 如果需要保留最小化前的滚动位置，可以额外添加状态记录滚动值

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