必须显式在modal.header上设closebutton={false}，否则自定义按钮与原生.btn-close重叠并触发双关闭；需用type="button"、aria-label="close"的包裹图标，父容器加position-relative，定位推荐bootstrap工具类。
React Bootstrap Modal 中关闭按钮必须显式禁用
不设 closeButton={false}，自定义按钮会和原生 .btn-close 重叠，点击可能触发两次 onHide，且无障碍语义残留（aria-label="Close" 仍存在）。这不是样式问题，是 DOM 层级冲突。
-
closeButton={false}必须写在<modal.header></modal.header>上，写在<modal></modal>或<modal.body></modal.body>无效 - 错误写法：
closeButton="false"（字符串）→ React 不识别，按钮照常渲染 - 正确写法：
<modal.header closebutton="{false}"></modal.header>→ 原生按钮节点完全不生成 - 禁用后，你才真正拥有对右上角区域的控制权
自定义按钮必须用 <button></button> 包裹并带关键属性
用 <div> 或 <code><span></span> 替代按钮，会导致键盘无法聚焦、空格/回车不能触发关闭，且部分浏览器在表单内会误提交。
- 必须加
type="button"：避免嵌套在<form></form>中时触发表单提交 - 必须加
aria-label="Close"：否则屏幕阅读器无法识别关闭意图，政务/医疗类项目上线会被审计驳回 - 推荐定位方式：
className="position-absolute top-0 end-0 mt-3 me-3"（Bootstrap 5.3+ 工具类），比硬写right: 1rem; top: 1rem;更适配 RTL 和响应式断点 - 父容器
<modal.header></modal.header>需手动加className="position-relative"，否则position-absolute会相对 body 定位
图标选型与颜色适配暗色模式
原生 .btn-close 在 Modal 里根本不会被渲染（它只响应 data-bs-dismiss="toast"），所以别试图覆盖它的 ::before 或改 background-image —— 这些样式压根没生效。
- 推荐图标：Font Awesome v6 的
faXmark（语义准确），而非已废弃的faTimes - 颜色不要硬编码：
color: currentColor或通过 CSS 变量继承，否则data-bs-theme="dark"下文字/图标会不可见 - 如果用 Unicode ×，确保
font-size和line-height匹配父容器高度，否则垂直居中偏移 - 别忽略 focus 状态：加
:focus-visible { outline: 2px solid #0d6efd; }，否则键盘用户找不到焦点位置
双层 Modal 关闭时子窗连带关父窗
这不是样式错，而是事件冒泡没截断。子 Modal 关闭按钮点击后，hide.bs.modal 事件向上冒泡到父 Modal，触发了连带关闭。
- 解决方式：在子 Modal 关闭按钮的
onClick里加e.stopPropagation() - 示例：
onClick={(e) => { e.stopPropagation(); handleClose(); }} - 如果用了原生
.btn-close（不推荐），需监听其 click 并同样调用e.stopPropagation() - 这个坑只在嵌套 Modal 场景出现，但一旦触发就很难排查，因为控制台无报错
position: relative，导致你写的 position-absolute 按钮脱离预期位置；还有就是 aria-label 和 type="button" 看似细枝末节，却是合规上线的硬性门槛。
