Πώς να καταστήσει το ύφος activeClassName για αντιδρά-router-dom NavLink που παρέχονται στο πλαίσιο ενός κουμπιού υλικό-ui;

ψήφοι
0

Είμαι μάθηση αντιδρούν και προσπαθούν να ορίσετε το στυλ ενός αντιδρά-router-dom NavLink έγκλειστα μέσα σε ένα υλικό-ui κουμπί . Η τεκμηρίωση αναφέρει ότι αυτό μπορεί να επιτευχθεί με τον καθορισμό του activeClassName ιδιοκτησίας.

Στον κώδικα λίστα παρακάτω θα προσπαθήσουμε να ρυθμίσουμε τη activeClassName στο κουμπί που περιέχει το NavLink συστατικό.


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

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

Η τονίζεται κατηγορία CSS έχει ως εξής:

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

Ωστόσο, χωρίς περίγραμμα κάτω αποδίδεται. Πώς μπορώ να αποκτήσω το activeClassName στυλ για να καταστεί μια αντίδραση-router-dom NavLink που παρέχονται μέσα σε ένα υλικό-ui Button ;

Δημοσιεύθηκε 09/10/2019 στις 18:54
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
0

Τι έχετε να εργαστούν, αλλά περνάτε ένα όνομα κατηγορίας, όχι ένα στυλ, έτσι νομίζω ότι το μόνο που χρειάζεται να κάνετε σας activeClassNameprop ίσο με «τόνισε».

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

Θα πρέπει επίσης να προσθέσετε !importantστο στυλ σας, ώστε να υπερισχύει το CSS του κουμπιού Υλικού UI.

Εργασία codesandbox σύνδεση

Απαντήθηκε 09/10/2019 στις 22:03
πηγή χρήστη

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