React-Bootstrap Modal组件仅显示原生HTML样式无预设样式问题求助

问题原因 #

React-Bootstrap 仅封装组件的交互逻辑与DOM结构，预设样式依赖独立的Bootstrap CSS文件，未引入该CSS文件是导致组件只有原生HTML样式的核心原因。

修复方案 #

二选一即可：

• 本地安装引入（推荐）
  1. 执行安装命令：npm install bootstrap
  2. 在项目入口文件（通常为src/index.js或src/App.js）顶部导入样式：import 'bootstrap/dist/css/bootstrap.min.css';
• CDN引入
  在项目public/index.html的<head>标签内添加Bootstrap CSS的官方CDN资源即可。

注意事项 #

需保证react-bootstrap与Bootstrap的版本匹配：react-bootstrap 2.x对应Bootstrap 5.x，react-bootstrap 1.x对应Bootstrap 4.x，版本不兼容会导致样式异常。

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