必须显式在modal.header上设closebutton={false}，否则自定义按钮与原生按钮重叠；需添加type="button"、aria-label="close"，推荐faxmark图标，并确保父容器position: relative及按钮垂直居中。
React Bootstrap Modal 怎么禁用默认关闭按钮
必须显式传 closeButton={false} 给 Modal.Header，否则自定义按钮会和原生按钮重叠。这个 props 不是可选的“开关”，而是强制覆盖逻辑——即使你没写 closeButton，默认也是 true。
常见错误是只在 Modal 根组件上设 closeButton={false}，但无效，因为控制权在 Modal.Header 层级。
- 正确位置：
<modal.header closebutton="{false}"></modal.header> - 别漏掉
aria-label="Close"和type="button"—— 否则无障碍支持失效，且部分浏览器会触发表单提交 - 如果用了 Font Awesome，推荐
faXmark（v6）而非已废弃的faTimes，图标语义更准确
Bootstrap 5.3+ 的 .btn-close 怎么换图标不破事件
直接改 color 或 font-size 没用，因为 v5.3+ 默认用 background-image 渲染 SVG，不是文字节点。强行覆盖样式容易导致点击区域错位或完全失灵。
稳妥做法是用伪元素 + Unicode 字符，但必须保留原始按钮结构和事件绑定能力：
- 先清空原生背景：
.btn-close { background: none; padding: 0; } - 用
::before插入字符，不是::after（后者容易被误设pointer-events: none） - 关键对齐参数：
line-height: 1+font-size: 1.5rem+vertical-align: middle - 颜色用
currentColor，避免暗色模式下硬编码色值失效
自定义关闭按钮的定位为什么总偏移
Modal.Header 是 flex 容器，默认 align-items: center，但自定义按钮若用 position: absolute，必须配合 top: 50% + transform: translateY(-50%) 才能垂直居中——仅靠 top: 10px 在不同字号/行高下会浮动。
- 父容器需设
position: relative（Modal.Header默认没有，要手动加） - 不要依赖
right: 1rem这类固定值，响应式断点下可能贴边溢出；改用inset-inline-end: 1rem更健壮 - 如果 Modal 内容有滚动条，右侧空间会动态变化，建议加
margin-inline-end: 1rem预留缓冲
双层 Modal 关闭时子窗把父窗也带关了怎么办
根本原因是子 Modal 的 hide.bs.modal 事件冒泡到了父 Modal，触发了连带关闭。不是样式问题，是事件流没截断。
解决方式不是改图标，而是阻止事件传播：
- 给子 Modal 的关闭按钮加
onClick={(e) => { e.stopPropagation(); handleClose(); }} - 如果用的是右上角原生
.btn-close，需监听其click并调用e.stopPropagation()，不能只靠data-bs-dismiss - 检查是否误用了
data-bs-backdrop="static"但没配data-bs-keyboard="false"，键盘 ESC 仍会穿透关闭父窗
content: "×" 在某些 Linux 环境或旧 Android 上可能渲染成方块。宁可用 base64 SVG 替换，也不要赌字体一致性。
