React Bootstrap导航栏无样式无法正常运行问题求助

问题原因 #

你仅安装了react-bootstrap和bootstrap依赖包，未引入Bootstrap的全局样式文件。react-bootstrap只提供封装后的React组件，所有样式渲染依赖Bootstrap官方的CSS资源，没有导入样式的情况下组件自然不会有对应效果。你给出的组件代码本身没有逻辑错误，无需修改。

解决步骤 #

• 首先安装对应版本的bootstrap依赖（已安装可跳过）：
  使用npm安装执行命令：

  npm install bootstrap
  

  使用yarn安装执行命令：

  yarn add bootstrap
  

  注意：react-bootstrap 2.x版本对应Bootstrap 5.x，react-bootstrap 1.x版本对应Bootstrap 4.x，版本不匹配也会出现样式异常
• 在项目入口文件（通常为src/index.js或src/main.jsx）的最顶部引入全局样式：

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

  如果你使用Sass预处理器，也可以在全局样式文件中导入Sass版本的Bootstrap样式：

  @import "~bootstrap/scss/bootstrap";
  

配置完成后刷新页面，导航栏的深色背景、按钮、下拉菜单等样式就会正常渲染。

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