¿Por qué React-Scroll activeClass no funciona?

Question

Estoy usando React-scroll para el efecto de desplazamiento y todo funciona bien en cuanto al desplazamiento a mi sección específica, pero por alguna razón, la parte activeClass de los documentos no funciona.

Aquí está mi código de enlace

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

Entonces mi CSS activo

.active {
 color: red;
}

¿Me estoy perdiendo de algo?

Para los componentes con estilo, ¿cómo implementaría 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'};
      `;

Descubrí una manera, pero no estoy seguro de si es el mejor método

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

Luego, en un archivo css separado que acabo de agregar

 a.active {
 color: red;
 }

si no pones un. antes de la clase activa, solo recibirá el color del texto de su componente de estilo original.

Answer 1

Enlace a la documentación https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

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

Answer 2

Debe configurarlo spy={true}para que el enlace se seleccione cuando el desplazamiento esté en su posición de destino

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

Answer 3

Link ya no tiene activeClass , debe usar NavLink en su lugar

<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

Puede pasar espía propsa su componente NavLink en lugar del componente Link. Ejemplo:

<NavLink spy smooth>HEY</Link>

Answer 5

Si desea diseñar la clase activa con un componente con estilo, use .attrs para establecer el nombre de la clase activa prop, luego use el nombre de la clase en el CSS. Tenga en cuenta que &es posible que tenga que jugar con él para aumentar la especificidad del selector si clasifica con cualquier estilo / clases / etc.existente. Al configurar el activeClassaccesorio directamente en el componente, no tiene que especificar el nombre de la clase al consumir el enlace en su código de interfaz de usuario.

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

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