Wie in einer Material-ui-Taste activeClassName Stil für einen reagieren Router-dom NavLink gemacht machen?

stimmen
0

Ich lerne reagieren und versuchen , den Stil eines setzen reagieren-Router-dom NavLink in einem gekapselten Material-ui - Taste . Die Dokumentation stellt fest , dass dies durch die Einstellung der erreicht werden kann activeClassName Eigenschaft.

In der Codeliste unten Ich versuche , die Einstellung activeClassName das enthält , auf die Schaltfläche NavLink Komponente.


import * as navbar from './NavBar.css';

const NavBarLinks = () => (
  <>
    <Button
      color=inherit
      component={NavLink}
      activeClassName={navbar.highlighted}
      to=/about
    >
      About
    </Button>
  </>
);

Die markierte CSS-Klasse ist wie folgt:

.highlighted {
  border-bottom: 3px solid rgb(174, 185, 28);
}

Es wird jedoch keine untere Grenze gemacht. Wie erhalte ich den activeClassName Stil für eine machen reagieren-Router-dom NavLink innerhalb einer gerenderten Material-ui - Taste ?

Veröffentlicht am 09/10/2019 um 18:54
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Was haben Sie sollte funktionieren, aber Sie einen Klassennamen sind vorbei, kein Stil, so dass ich glaube , Sie brauchen nur Ihre machen activeClassNameprop gleich „markiert“.

<Button
  color="inherit"
  component={NavLink}
  activeClassName="highlighted"
  to="/about"
 >
  About
</Button>

Sie werden auch hinzufügen müssen !importantSie Stil , damit es die CSS des Materials UI - Taste außer Kraft setzt.

Arbeiten codesandbox Link

Beantwortet am 09/10/2019 um 22:03
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more