Dlaczego nie działa React-Scroll activeClass?

Question

Używam React-scroll dla efektu przewijania i wszystko działa dobrze, jeśli chodzi o przewijanie do mojej określonej sekcji, ale z jakiegoś powodu część activeClass z dokumentów nie działa.

Oto mój kod linku

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

Potem mój aktywny CSS

.active {
 color: red;
}

Czy coś mi brakuje?

W przypadku stylizowanych komponentów jak zaimplementowałbym 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'};
      `;

Znalazłem sposób, ale nie jestem pewien, czy to najlepsza metoda

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

Następnie w osobnym pliku css, który właśnie dodałem

 a.active {
 color: red;
 }

jeśli nie umieścisz pliku. przed aktywną klasą, otrzyma kolor tekstu tylko z oryginalnego komponentu ze stylem.

Answer 1

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

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

Answer 2

Musisz ustawić spy={true}tak, aby łącze zostało wybrane, gdy przewijanie znajdzie się w pozycji docelowej

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

Answer 3

Link nie ma już activeClass , musisz zamiast tego użyć 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

Możesz przekazać szpiega jako propskomponent NavLink zamiast komponentu Link. Przykład:

<NavLink spy smooth>HEY</Link>

Answer 5

Jeśli chcesz stylizować aktywną klasę za pomocą komponentu ze stylem, użyj .attrs, aby ustawić właściwość nazwy aktywnej klasy, a następnie użyj nazwy klasy w CSS. Uwaga na temat tego &, być może będziesz musiał pobawić się z nim, aby zwiększyć specyficzność selektora, jeśli klasy z istniejącymi stylami / klasami / itp. Ustawiając właściwość activeClassbezpośrednio w komponencie, nie musisz określać nazwy klasy podczas używania linku w kodzie interfejsu użytkownika.

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

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