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

我正在使用Gatsby.js构建一个站点。它的工作原理与React.js非常相似

我有副菜单。我希望此菜单上的图标在用户位于相应页面时突出显示。盖茨比有一个选择，但这对我不起作用。当我在相应页面上时，图标仍然保持白色

我使用activeStyle的盖茨比代码如下所示：

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

“FiUser”是我与react图标一起使用的图标的名称

如果我将“activeStyle”更改为“style”，图标会变为蓝色-只是不带“activeStyle”

我想知道是否有人能告诉我哪里出了问题

activeStyle和activeClassName应该用于链接组件本身，而不是其子组件

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

---

通过对银色翅膀男孩的回答进行一些修改，我发现适合我的是：

<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>

这正是我想要的。我希望这能帮助其他人

例如，在“关于/剪影”页面上，它看起来如下所示：

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

---

谢谢你，真是太棒了！我有一些覆盖css的颜色。如果我的css覆盖了activeStyle属性，我如何选择图标的“非活动”颜色？你可以使用activeClassName而不是activeStyle来覆盖Child上的样式。嗯，这些似乎对我不起作用，但似乎起作用的是：。活动{color:70a260；}a{color:white；}你是否添加了用户链接作为类名，此外，您当前的样式会将所有a标记的颜色更改为白色。抱歉，我仍然无法使其工作-我已更改了类名，它可以突出显示正确的页面，但如果不在CSS中以“a”为目标，我仍然无法选择默认图标的颜色

.user-icon {
  color: #d8d8d8;
}

.user-text {
  color: #d8d8d8;
}

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

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