javascript - 在页面上使用React/Gatsby突出显示菜单图标？

我正在使用Gatsby.js建立网站。它的工作原理与React.js非常相似。

我有一个侧面菜单。我希望用户在相应页面上时突出显示此菜单上的图标。 Gatsby具有'activeStyle'选项，但这对我不起作用。当我在相应页面上时，图标仍然保持白色。

我的使用activeStyle的gatsby代码如下所示：

<div class="sidebar_button">
          <Link to="/about">
            <i>
              <FiUser size={22} activeStyle={{ color: "blue" }} />
            </i>
            <p>ABOUT</p>
          </Link>
</div>

“ FiUser”是我正在使用的图标的名称（带有react-icons）。

如果我将'activeStyle'更改为'style'，图标的确会更改为蓝色-而不是'activeStyle'。

我想知道是否有人可以指出错误的正确方向？

最佳答案

activeStyle和activeClassName应该用于Link组件本身，而不是子组件。

<div class="sidebar_button">
      <Link to="/about" activeClassName="active-link">
        <i>
          <FiUser size={22} className="user-icon" />
        </i>
        <p>ABOUT</p>
      </Link>
</div>

i和FiUser不应具有任何将覆盖此样式的属性。

关于样式：

.user-link {
  color: blue;
}
.active .user-link {
  color: white;
}

Docs