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

Question

我正在使用Gatsby.js构建网站。它的工作方式与React.js非常相似。

我有一个侧面菜单。我希望用户在相应页面上时突出显示此菜单上的图标。盖茨比有一个'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'。

我在想，是否有人能指出发生问题的正确方向？

Answer 1

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

Answer 2

使用带有银翼的男孩的答案进行了一些修改，我发现对我有用的是：

<div class="sidebar_button">
    <Link to="/" activeClassName="user-link">
        <i>
            <TiHomeOutline size={22} className="user-icon" />
        </i>
        <p className="user-text">HOME</p>
    </Link>
</div>

对于我的CSS：

.user-icon {
  color: #d8d8d8;
}

.user-text {
  color: #d8d8d8;
}

.user-link .user-icon {
  color: #97b27b;
}

.user-link .user-text {
  color: #97b27b;
}

这恰好生成了我正在寻找的东西。我希望这可以帮助其他人。

例如，在About /“剪影”页面上，它看起来像这样：