Perché React-Scroll activeClass non funziona?

Question

Sto usando React-scroll per l'effetto di scorrimento e tutto funziona bene per quanto riguarda lo scorrimento alla mia sezione specifica, ma per qualche motivo la parte activeClass dei documenti non funziona.

Ecco il mio codice di collegamento

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

Quindi il mio CSS attivo

.active {
 color: red;
}

Mi sto perdendo qualcosa?

Per i componenti in stile come implementerei 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'};
      `;

Ho trovato un modo, ma non sono sicuro che sia il metodo migliore

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

Quindi in un file CSS separato ho appena aggiunto

 a.active {
 color: red;
 }

se non metti un file. prima della classe attiva, riceverà solo il colore del testo dal componente con stile originale.

Answer 1

Link alla documentazione https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

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

Answer 2

È necessario impostare in spy={true}modo che il collegamento venga selezionato quando lo scorrimento è nella posizione di destinazione

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

Answer 3

Collegamento non ha più activeClass bisogna usare NavLink invece

<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

Puoi passare la spia propsal tuo componente NavLink invece del componente Link. Esempio:

<NavLink spy smooth>HEY</Link>

Answer 5

Se vuoi applicare uno stile alla classe attiva con un componente con stile, usa .attrs per impostare il prop del nome della classe attiva, quindi usa il nome della classe nel CSS. Nota su &, potresti dover giocare con esso per aumentare la specificità del selettore se classifica con uno stile / classi / ecc. Esistenti. Impostando il activeClassprop direttamente sul componente non è necessario specificare il nome della classe quando si utilizza il collegamento nel codice dell'interfaccia utente.

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

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