Warum funktioniert React-Scroll activeClass nicht?

Question

Ich verwende React-Scroll für den Scroll-Effekt und alles funktioniert einwandfrei, bis zum Scrollen zu meinem spezifischen Abschnitt, aber aus irgendeinem Grund funktioniert der activeClass-Teil aus den Dokumenten nicht.

Hier ist mein Linkcode

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

Dann mein aktives CSS

.active {
 color: red;
}

Vermisse ich etwas

Wie würde ich für gestaltete Komponenten die activeClass implementieren?

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

Ich habe einen Weg gefunden, bin mir aber nicht sicher, ob es die beste Methode ist

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

Dann habe ich in einer separaten CSS-Datei gerade hinzugefügt

 a.active {
 color: red;
 }

wenn Sie nicht ein setzen. Vor der aktiven Klasse erhält sie nur die Farbe des Textes von Ihrer ursprünglichen Komponente.

Answer 1

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

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

Answer 2

Sie müssen festlegen spy={true}, dass der Link ausgewählt wird, wenn sich der Bildlauf an der Zielposition befindet

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

Answer 3

Link hat keine activeClass mehr. Sie müssen stattdessen NavLink verwenden

<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

Sie können propsanstelle Ihrer Link-Komponente einen Spion für Ihre NavLink-Komponente übergeben. Beispiel:

<NavLink spy smooth>HEY</Link>

Answer 5

Wenn Sie die aktive Klasse mit einer gestalteten Komponente formatieren möchten , verwenden Sie die .attrs , um die Requisite für den aktiven Klassennamen festzulegen , und verwenden Sie dann den Klassennamen im CSS. Beachten &Sie, dass Sie möglicherweise damit herumspielen müssen, um die Selektorspezifität zu erhöhen, wenn Klassen mit vorhandenen Stilen / Klassen / etc. Wenn Sie die activeClassRequisite direkt auf die Komponente setzen, müssen Sie den Klassennamen nicht angeben, wenn Sie den Link in Ihrem UI-Code verwenden.

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

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