React-Scroll activeClass neden çalışmıyor?

Question

Kaydırma efekti için React-scroll kullanıyorum ve özel bölümüme kaydırmaya kadar her şey yolunda gidiyor, ancak bazı nedenlerden dolayı belgelerdeki activeClass bölümü çalışmıyor.

İşte bağlantı kodum

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

Sonra aktif CSS'm

.active {
 color: red;
}

Bir şey mi kaçırıyorum?

Biçimlendirilmiş bileşenler için activeClass'ı nasıl uygularım?

    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'};
      `;

Bir yolunu buldum ama bunun en iyi yöntem olduğundan emin değilim

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

Sonra ayrı bir css dosyasında yeni ekledim

 a.active {
 color: red;
 }

bir. Etkin sınıftan önce, o zaman yalnızca orijinal stilize edilmiş bileşeninizden metnin rengini alır.

Answer 1

Belgelere bağlantı https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

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

Answer 2

spy={true}Kaydırma hedef konumunda olduğunda Bağlantı seçilecek şekilde ayarlamanız gerekir

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

Answer 3

Link artık activeClass'a sahip değil bunun yerine NavLink'i kullanmanız gerekiyor

<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

propsLink bileşeni yerine NavLink bileşeninize göre casusluk gönderebilirsiniz. Misal:

<NavLink spy smooth>HEY</Link>

Answer 5

Aktif sınıfa stilize edilmiş bir bileşenle stil vermek istiyorsanız , aktif sınıf adı propunu ayarlamak için .attrs öğesini kullanın, ardından CSS'deki sınıf adını kullanın. &Mevcut stil / sınıflar / vb. İle sınıflarsa, seçici özgüllüğünü artırmak için onunla oynamak zorunda kalabilirsiniz. activeClassPervaneyi doğrudan bileşene ayarlayarak, UI kodunuzdaki bağlantıyı tüketirken sınıf adını belirtmeniz gerekmez.

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

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