当我导入 bootstrap 时，React bootstrap 图标不起作用

Question

导入 bootstrap.css 时，我在 NavLink 组件中看不到引导图标。

我有一个react项目，我使用

npm i bootstrap

安装了bootstrap，并且还使用

npm i react-bootstrap-icons

安装了react-bootstrap-icons。 我在index.js文件中导入了bootstrap（

import "bootstrap/dist/css/bootstrap.css"

；） 我的子组件之一正在使用图标：

import { DoorClosed } from "react-bootstrap-icons";
import { NavLink } from "react-router-dom";

export default function Header() {
  <NavLink to="/Login">
    <span className="logoutIcon-container tooltip" id="logoutBtn">
      <DoorClosed size={96} color="white" />
      <span className="tooltipText">Logout</span>
    </span>
  </NavLink>
}

但我没有看到该图标。我有两种显示图标的解决方案，但都不适合我的项目：

1. 我可以在index.js中导入引导网格系统

   import "bootstrap/dist/css/bootstrap-grid.min.css"

   而不是

   import "bootstrap/dist/css/bootstrap.css"

   。 （但是，我将不再能够在我的项目中使用引导类。）

2. 我可以将图标移到

   <NavLink/>

   组件之外。 （但我需要它位于组件内部）

还有更好的解决办法吗？

Answer 1

• Header

  组件需要返回一些东西来渲染，例如它应该返回

  NavLink

  和 JSX 的其余部分。
• 我不太清楚为什么

  "tooltip"

  类会添加到您的链接中，但这里的问题是它设置了

  opacity: 0;

  CSS 规则，这使得渲染的 UI 不可见。删除

  "tooltip"

  类。

代码：

function Header() {
  return (                               // <-- Return JSX
    <NavLink to="/Login">
      <span
        className="logoutIcon-container" // <-- Remove "tooltip" class
        id="logoutBtn"
      >
        <DoorClosed size={96} color="white" />
        <span className="tooltipText">Logout</span>
      </span>
    </NavLink>
  );
}