Por que o React-Scroll activeClass não está funcionando?

Question

Estou usando o React-scroll para o efeito de rolagem e tudo funciona bem no que diz respeito à rolagem para minha seção específica, mas por algum motivo a parte activeClass dos documentos não está funcionando.

Aqui está o código do meu link

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

Então meu CSS ativo

.active {
 color: red;
}

Estou esquecendo de algo?

Para componentes estilizados, como implementaria 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'};
      `;

Eu descobri uma maneira, mas não tenho certeza se é o melhor método

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

Então, em um arquivo css separado, acabei de adicionar

 a.active {
 color: red;
 }

se você não colocar um. antes da classe ativa, ela receberá apenas a cor do texto do seu componente com estilo original.

Answer 1

Link para documentação https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

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

Answer 2

Você precisa definir de spy={true}forma que o link seja selecionado quando a rolagem estiver na posição de destino

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

Answer 3

Fazer a ligação já não tem activeClass você tem que usar NavLink vez

<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

Você pode passar spy como propspara o seu componente NavLink em vez do componente Link. Exemplo:

<NavLink spy smooth>HEY</Link>

Answer 5

Se você quiser estilizar a classe ativa com um componente estilizado, use o .attrs para definir o nome da classe ativa prop e, em seguida, use o nome da classe no CSS. Observação sobre o &, você pode ter que brincar com ele para aumentar a especificidade do seletor se ele classifica com qualquer estilo / classes / etc existentes. Ao definir o activeClassprop diretamente no componente, você não precisa especificar o nome da classe ao consumir o link em seu código de IU.

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

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