如何使React Confirm Alert组件适配移动端等全屏幕设备？

1. 自定义弹窗UI（最灵活方案） #

React Confirm Alert支持通过customUI属性完全自定义弹窗结构，你可以根据屏幕尺寸编写响应式样式：

• 示例代码：

import { confirmAlert } from 'react-confirm-alert';
// 可以不用引入默认CSS，完全用自定义样式替代
// import 'react-confirm-alert/src/react-confirm-alert.css';

const showDeleteConfirm = () => {
  confirmAlert({
    customUI: ({ onClose }) => {
      return (
        <div className="custom-delete-modal">
          <h3>确认删除？</h3>
          <p>该操作无法恢复，请确认后执行。</p>
          <div className="modal-actions">
            <button onClick={onClose} className="btn-cancel">取消</button>
            <button onClick={() => {
              // 这里写删除逻辑
              onClose();
            }} className="btn-delete">删除</button>
          </div>
        </div>
      );
    }
  });
};

• 配套响应式CSS：

.custom-delete-modal {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  max-width: 90%;
  width: 420px;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.8rem;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .custom-delete-modal {
    padding: 1.5rem;
    max-width: 95%;
  }
  
  .modal-actions {
    flex-direction: column;
  }
  
  .btn-cancel, .btn-delete {
    padding: 0.8rem;
  }
}

2. 覆盖库默认样式 #

如果不想自定义UI，可以直接修改库的默认类名样式，添加媒体查询适配移动端：

/* 覆盖弹窗容器 */
.react-confirm-alert {
  max-width: 90%;
  width: 400px;
  margin: 0 auto;
}

/* 覆盖按钮组 */
.react-confirm-alert-button-group {
  display: flex;
  gap: 1rem;
}

/* 移动端断点调整 */
@media (max-width: 480px) {
  .react-confirm-alert {
    max-width: 95%;
    padding: 1rem;
  }
  
  .react-confirm-alert-button-group {
    flex-direction: column;
  }
}

3. 基础检查：确保viewport设置正确 #

确认你的HTML文件头部已添加viewport meta标签，这是移动端适配的前提：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 多断点测试 #

根据实际场景调整媒体查询的断点（比如768px适配平板、375px适配小屏手机），测试弹窗的文字换行、按钮布局是否在各尺寸下正常显示。

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