เหตุใด React-Scroll activeClass จึงไม่ทำงาน

Question

ฉันใช้ React-scroll สำหรับเอฟเฟกต์การเลื่อนและทุกอย่างทำงานได้ดีเท่าที่การเลื่อนไปยังส่วนเฉพาะของฉัน แต่ด้วยเหตุผลบางประการส่วน activeClass จากเอกสารไม่ทำงาน

นี่คือรหัสลิงค์ของฉัน

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

จากนั้น CSS ที่ใช้งานอยู่ของฉัน

.active {
 color: red;
}

ฉันพลาดอะไรไปรึเปล่า?

สำหรับส่วนประกอบที่มีสไตล์ฉันจะใช้ 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'};
      `;

ฉันหาวิธีแล้ว แต่ไม่แน่ใจว่าเป็นวิธีที่ดีที่สุดหรือไม่

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

จากนั้นในไฟล์ css แยกต่างหากฉันเพิ่งเพิ่ม

 a.active {
 color: red;
 }

ถ้าคุณไม่ใส่. ก่อนคลาสที่ใช้งานอยู่มันจะได้รับสีของข้อความจากองค์ประกอบสไตล์ดั้งเดิมของคุณเท่านั้น

Answer 1

ลิงก์ไปยังเอกสาร https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

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

Answer 2

คุณต้องตั้งค่าspy={true}เพื่อให้ลิงค์ถูกเลือกเมื่อเลื่อนอยู่ที่ตำแหน่งเป้าหมาย

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

Answer 3

ลิงก์ไม่มีactiveClassอีกต่อไปคุณต้องใช้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

คุณสามารถส่งสปายpropsไปยังคอมโพเนนต์ NavLink แทนคอมโพเนนต์ Link ตัวอย่าง:

<NavLink spy smooth>HEY</Link>

Answer 5

หากคุณต้องการจัดสไตล์คลาสแอ็คทีฟด้วยสไตล์คอมโพเนนต์ให้ใช้ . attrsเพื่อตั้ง prop ชื่อคลาสที่ใช้งานอยู่จากนั้นใช้ชื่อคลาสใน CSS โปรดสังเกตว่า&คุณอาจต้องเล่นกับมันเพื่อเพิ่มความเฉพาะเจาะจงของตัวเลือกหากคลาสที่มีสไตล์ / คลาส / ฯลฯ ที่มีอยู่ การตั้งค่าactiveClassprop โดยตรงบนส่วนประกอบคุณไม่จำเป็นต้องระบุชื่อคลาสเมื่อใช้ลิงก์ในรหัส UI ของคุณ

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

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