React Bootstrap v2.10.4 Modal关闭按钮X不显示问题求助

问题原因 #

React Bootstrap 2.x版本移除了对默认关闭图标的内置依赖，而1.x版本会自动包含该图标。升级后仅通过closeButton属性无法渲染出可见的关闭图标，但按钮的点击区域依然存在，因此点击有效却看不到图标。

解决方案 #

方法1：引入Bootstrap Icons库（官方推荐） #

1. 安装Bootstrap Icons：

npm install bootstrap-icons
# 或使用yarn
yarn add bootstrap-icons

2. 在项目入口文件（如index.js或App.js）中导入图标样式：

import 'bootstrap-icons/font/bootstrap-icons.css';

完成以上操作后，原有代码无需修改，关闭图标会自动显示。

方法2：自定义关闭图标 #

如果不想引入额外图标库，可通过closeIcon属性传入自定义图标元素：

<Modal.Header closeButton closeIcon={<span style={{fontSize: '1.25rem', fontWeight: 'bold'}}>×</span>}>
    <Modal.Title id="contained-modal-title-vcenter">
        <div className="alert_big"></div>
        <span>Alert!</span>
    </Modal.Title>
</Modal.Header>

你也可以替换示例中的<span>×</span>为项目中已有的图标组件。

方法3：确认Bootstrap CSS版本兼容性 #

确保项目中引入的Bootstrap CSS版本与React Bootstrap 2.x兼容（推荐搭配Bootstrap 5.x），版本不匹配也可能引发样式异常。

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