Tại sao React-Scroll activeClass không hoạt động?

Question

Tôi đang sử dụng React-scroll cho hiệu ứng cuộn và mọi thứ hoạt động tốt cho đến khi cuộn đến phần cụ thể của tôi, nhưng vì một số lý do mà phần ActiveClass từ tài liệu không hoạt động.

Đây là mã liên kết của tôi

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

Sau đó, CSS hoạt động của tôi

.active {
 color: red;
}

Tui bỏ lỡ điều gì vậy?

Đối với các thành phần được tạo kiểu, tôi sẽ triển khai ActiveClass như thế nào?

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

Tôi đã tìm ra một cách, nhưng không chắc đó có phải là phương pháp tốt nhất không

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

Sau đó, trong một tệp css riêng biệt mà tôi vừa thêm

 a.active {
 color: red;
 }

nếu bạn không đặt a. trước lớp đang hoạt động, sau đó nó sẽ chỉ nhận màu của văn bản từ thành phần được tạo kiểu ban đầu của bạn.

Answer 1

Liên kết đến tài liệu https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

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

Answer 2

Bạn cần thiết lập spy={true}để Liên kết sẽ được chọn khi cuộn ở vị trí mục tiêu của nó

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

Answer 3

Liên kết không còn ActiveClass nữa, bạn phải sử dụng NavLink để thay thế

<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

Bạn có thể chuyển gián điệp propstới thành phần NavLink của mình thay vì thành phần Liên kết. Thí dụ:

<NavLink spy smooth>HEY</Link>

Answer 5

Nếu bạn muốn tạo kiểu cho lớp hoạt động với một thành phần được tạo kiểu, hãy sử dụng .attrs để đặt tên lớp hoạt động chống đỡ, sau đó sử dụng tên lớp trong CSS. Lưu ý về &, bạn có thể phải thử với nó để tăng tính cụ thể của bộ chọn nếu nó phân loại với bất kỳ kiểu / lớp / v.v. nào hiện có. Bằng cách đặt phần activeClasshỗ trợ trực tiếp trên thành phần, bạn không phải chỉ định tên lớp khi sử dụng liên kết trong mã giao diện người dùng của mình.

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

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