Jo Ko
Ich habe folgendes:
Wie bekomme ich die blaue Unterstreichung weg? Der Code ist unten:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
Die MenuItem-Komponente stammt von http://www.material-ui.com/#/components/menu
Daniel Urania
Ich denke, der beste Weg, den Link “React-Router-Dom” in einem MenuItem (und anderen MaterialUI-Komponenten wie Schaltflächen) zu verwenden, besteht darin, den Link in der “Komponente”-Prop zu übergeben
<Menu>
<MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
<MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>
Sie müssen den Routenpfad in der „to“-Prop des „MenuItem“ übergeben (der an die Link-Komponente weitergegeben wird). Auf diese Weise müssen Sie keinen Stil hinzufügen, da der MenuItem-Stil verwendet wird
Ihre sollte 2019 definitiv die Antwort sein.
– Pablo Anaya
11. Juni 2019 um 10:53 Uhr
Das ist 100x besser als die Dokumentation, sie lieben jede Menge nutzlosen Code
– coiso
23. April 2020 um 21:36 Uhr
Alle anderen Antworten machen mir Angst
– coiso
23. April 2020 um 21:37 Uhr
Obwohl es vereinfacht ist, denke ich, dass es unter Requisitenkollisionen leiden kann. Sie können dies in Betracht ziehen. material-ui.com/guides/composition/#caveat-with-prop-forwarding
– Mateen
9. Juli 2020 um 3:03 Uhr
Oder sollte nicht lieber
Es gibt auch eine andere Möglichkeit, das Styling des Links ordnungsgemäß zu entfernen. Man muss ihm Stil verleihen textDecoration='inherit' und color="inherit" Sie können diese entweder als Styling zum Link-Tag hinzufügen wie:
<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>
oder um es allgemeiner zu machen, erstellen Sie einfach eine CSS-Klasse wie:
.text-link {
color: inherit;
text-decoration: inherit;
}
Und dann eben <Link className="text-link">
haben Sie meine Lösung stackoverflow.com/a/55693040/3000540 ausprobiert
– Daniele Urania
2. Juli 2019 um 10:52 Uhr
Dies sollte die akzeptierte Antwort sein, da sie auch die Farbänderung entfernt. Gibt es auch eine Möglichkeit, diese CSS-Klasse in JSS zu übersetzen? Ich hatte das gleiche Problem mit Material-UI und die Verwendung der Stilstütze half.
– normann123123
18. August 2020 um 19:18 Uhr
das hat bei mir eher funktioniert a:hover{ color: inherit; Textdekoration: keine; }
– Jonathan Bonzali
7. Juli 2021 um 2:13 Uhr
Das funktioniert für mich. Und dieser Weg ist einfacher als andere. Vielen Dank 🙂
– Lojith Vinsuka
18. September 2021 um 14:20 Uhr
Thomas Ebert
Du kannst hinzufügen style={{ textDecoration: 'none' }} in deiner Link Komponente, um die Unterstreichung zu entfernen. Sie können auch weitere hinzufügen css in dem style blockieren zB style={{ textDecoration: 'none', color: 'white' }}.
<h1>
<Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
Get Started
</Link>
</h1>
haben Sie meine Lösung stackoverflow.com/a/55693040/3000540 ausprobiert
– Daniele Urania
2. Juli 2019 um 10:52 Uhr
Dies sollte die akzeptierte Antwort sein, da sie auch die Farbänderung entfernt. Gibt es auch eine Möglichkeit, diese CSS-Klasse in JSS zu übersetzen? Ich hatte das gleiche Problem mit Material-UI und die Verwendung der Stilstütze half.
– normann123123
18. August 2020 um 19:18 Uhr
das hat bei mir eher funktioniert a:hover{ color: inherit; Textdekoration: keine; }
– Jonathan Bonzali
7. Juli 2021 um 2:13 Uhr
Das funktioniert für mich. Und dieser Weg ist einfacher als andere. Vielen Dank 🙂
– Lojith Vinsuka
18. September 2021 um 14:20 Uhr
Dharman
a:-webkit-any-link {
text-decoration: none;
color: inherit;
}
stellen
textDecoration: 'none'auf der<Link />Komponente nicht ihre Kinder.– Asium
7. Juni 2016 um 4:31 Uhr