Выделите значок меню, когда на этой странице используете React / Gatsby?

Question

Я использую Gatsby.js для создания сайта. Он работает очень похоже на React.js.

У меня есть боковое меню. Мне бы хотелось, чтобы значки в этом меню были выделены, когда пользователь находится на соответствующей странице. У Гэтсби есть опция activeStyle , но у меня это не работает. Значок остается белым, когда я нахожусь на соответствующей странице.

Мой код Гэтсби с использованием ActiveStyle выглядит так:

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

'FiUser' - это название иконки, которую я использую (с реагировать на иконки).

Если я изменю '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;
}

Документы

Answer 2

Используя ответ Boy With Silver Wings с некоторыми модификациями, я обнаружил, что для меня сработало:

<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 / 'silhouette' это выглядит так: