Почему не работает React-Scroll activeClass?

Question

Я использую React-scroll для эффекта прокрутки, и все работает нормально, что касается прокрутки до моего конкретного раздела, но по какой-то причине часть activeClass из документов не работает.

Вот мой код ссылки

             <Link
                to='about'
                smooth={true}
                duration={1000}
                activeClass='active'
              >
                HEY
              </Link>

Затем мой активный CSS

.active {
 color: red;
}

Я что-то упускаю?

Для стилизованных компонентов, как мне реализовать activeClass?

    const Navbar = ({ toggle, active }) => {
      return (

        <NavLinks
              to='about'
              smooth={true}
              duration={1000}
              activeClass={active}
              spy={true}
            >
              About
            </NavLinks>


       export const NavLinks = styled(Link)`
        border-bottom: ${({ active }) =>
          active ? '3px solid blue' : '5px solid red'};
      `;

Я нашел способ, но не уверен, что это лучший способ

     <NavLinks
              to='about'
              smooth={true}
              duration={1000}
              activeClass={active ? 'active' : ''}
              spy={true}
            >
              About
            </NavLinks>

Затем в отдельном файле css я только что добавил

 a.active {
 color: red;
 }

если вы не поставите. перед активным классом, тогда он получит цвет текста только из вашего исходного стилизованного компонента.

Answer 1

Ссылка на документацию https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

const NavLinks = styled(Link)`
  color: blue;
  &.active {
    color: red;
  }
`;

Answer 2

Вам нужно настроить spy={true}так, чтобы ссылка была выбрана, когда прокрутка находится в своей целевой позиции

<Link
  to='about'
  smooth={true}
  duration={1000}
  activeClass='active'
  spy={true}
>
  HEY
</Link>

Answer 3

Link больше не имеет activeClass , вместо этого используйте NavLink

<BrowserRouter>
<div>
  <Nav>
    <NavLink exact={true} activeClassName='is-active' to='/about'>About</NavLink>
  </Nav>

  <Match pattern='/about' exactly component={About} />
  <Miss component={NoMatch} />
</div>

Answer 4

Вы можете передать шпион как propsкомпонент NavLink вместо компонента Link. Пример:

<NavLink spy smooth>HEY</Link>

Answer 5

Если вы хотите стилизовать активный класс с помощью стилизованного компонента, используйте .attrs для установки свойства имени активного класса, а затем используйте имя класса в CSS. Обратите внимание на &: вам, возможно, придется поэкспериментировать с ним, чтобы повысить специфичность селектора, если он классифицируется с любыми существующими стилями / классами / и т. Д. Устанавливая activeClassопору непосредственно на компонент, вам не нужно указывать имя класса при использовании ссылки в коде пользовательского интерфейса.

export const NavLinks = styled(Link).attrs(() => ({
  activeClass: 'active',
}))`
  // non-active styles
  border-bottom: 5px solid red;

  &.active {
    // active styles
    border-bottom: 3px solid blue;
  }
`;