react-bootstrap Modal组件关闭按钮渲染异常问题求助

核心原因 #

react-bootstrap 组件完全依赖原生 Bootstrap 的全局 CSS 样式实现视觉效果，Modal 关闭按钮的 X 标识是通过 Bootstrap 内置的 .btn-close 类的样式规则（包含伪元素content或图标字体配置）渲染的，未正确引入对应样式是此类异常的最常见诱因。

解决步骤 #

• 第一步：检查项目是否引入了匹配版本的 Bootstrap 样式，推荐在入口文件（如 index.js/main.tsx）顶部直接引入：

  import 'bootstrap/dist/css/bootstrap.min.css';
  

• 第二步：如果已引入样式仍异常，排查全局自定义 CSS 是否存在覆盖规则：
  • 检查是否有对 span 标签的通用样式重写
  • 检查是否有对 .btn-close 类的属性修改，尤其是 content、font-family 这类和X标识渲染相关的属性
• 第三步：确认版本兼容性，react-bootstrap 2.x 版本必须搭配 Bootstrap 5.x 版本使用，版本不匹配会出现大量样式异常。

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