引入bootstrap.css后NavLink内React Bootstrap Icons不显示求助

下面是几个针对性的解决方法，你可以逐一尝试：

1. 确认图标导入正确性 #

首先检查DoorClosed组件的导入是否准确，确保拼写和大小写无误：

import { DoorClosed } from 'react-bootstrap-icons';

如果导入路径或组件名错误，图标自然无法渲染。

2. 给图标添加强制显示的样式 #

Bootstrap的NavLink默认样式可能会影响SVG图标的显示（比如设置了不合理的display属性或继承了错误的颜色），可以给图标添加内联样式或自定义类强制显示：

• 内联样式写法：

  <NavLink to="/">
    <DoorClosed style={{ display: 'inline-block', verticalAlign: 'middle', width: '1.2em', height: '1.2em' }} />
    首页
  </NavLink>
  

• 自定义CSS类写法：
  先在样式文件中定义：

  .nav-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.2em;
    height: 1.2em;
    color: inherit;
  }
  

  然后在组件中使用：

  <NavLink to="/">
    <DoorClosed className="nav-icon" />
    首页
  </NavLink>
  

3. 调整样式导入顺序 #

确保Bootstrap的CSS在自定义样式之前导入，这样自定义样式可以覆盖Bootstrap的默认规则。比如在index.js中：

import "bootstrap/dist/css/bootstrap.css";
import './App.css'; // 项目自定义样式放在Bootstrap之后

4. 修正NavLink激活状态的样式冲突 #

如果只有在NavLink激活（active）时图标消失，可能是激活状态的样式覆盖了图标颜色或显示属性，可以单独设置激活状态下的图标样式：

<NavLink 
  to="/"
  className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
>
  <DoorClosed className={({ isActive }) => isActive ? 'text-primary' : 'text-dark'} />
  首页
</NavLink>

或者用CSS全局设置：

.nav-link.active .nav-icon {
  color: var(--bs-primary); /* 使用Bootstrap的主题变量 */
}

5. 切换到Bootstrap官方图标库（替代方案） #

如果react-bootstrap-icons和Bootstrap核心样式冲突难以解决，可以改用Bootstrap官方的图标库：

1. 安装：npm i bootstrap-icons
2. 在index.js导入样式：import "bootstrap-icons/font/bootstrap-icons.css"
3. 在NavLink中使用：

   <NavLink to="/">
     <i className="bi bi-door-closed"></i>
     首页
   </NavLink>
   

这种方式是Bootstrap官方配套，兼容性更强。

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