Wie entferne ich die Unterstreichung für die Link-Komponente von React Router?

Ich habe folgendes:

Wie entferne ich die blaue Unterstreichung? 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

Jede Einsicht oder Anleitung wäre sehr dankbar. Vielen Dank im Voraus.

Ich sehe, dass Sie Inline-Stile verwenden. textDecoration: 'none'wird bei Kindern verwendet, wo es tatsächlich <Link>als solches verwendet werden sollte:

<Link to="first" style={{ textDecoration: 'none' }}>
  <MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>

<Link>gibt im Wesentlichen ein Standard- <a>Tag zurück, weshalb wir dort die textDecorationRegel anwenden .

Ich hoffe das hilft

Wenn Sie verwenden styled-components, können Sie Folgendes tun:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';


const StyledLink = styled(Link)`
    text-decoration: none;

    &:focus, &:hover, &:visited, &:link, &:active {
        text-decoration: none;
    }
`;

export default (props) => <StyledLink {...props} />;

Ich denke, der beste Weg, um React-Router-Dom Link 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'-Requisite des "MenuItem" übergeben (die an die Link-Komponente weitergegeben wird). Auf diese Weise müssen Sie keinen Stil hinzufügen, da der MenuItem-Stil verwendet wird

Es gibt auch eine andere Möglichkeit, das Styling des Links ordnungsgemäß zu entfernen. Sie müssen ihm einen Stil geben textDecoration='inherit'und color='inherit'Sie können diese entweder als Stil 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 einfach <Link className='text-link'>

Sie können style={{ textDecoration: 'none' }}Ihre LinkKomponente hinzufügen , um die Unterstreichung zu entfernen. Sie können cssdem styleBlock auch weitere hinzufügen , z style={{ textDecoration: 'none', color: 'white' }}.

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1> 

// CSS

.navigation_bar > ul > li {
      list-style: none;
      display: inline;
      margin: 2%;
    }

    .link {
      text-decoration: none;
    }

// JSX

 <div className="navigation_bar">
            <ul key="nav">
              <li>
                <Link className="link" to="/">
                  Home
                </Link>
              </li>
            </ul>
          </div>

Es gibt den nuklearen Ansatz, der in Ihrer App.css (oder Ihrem Gegenstück) enthalten ist.

a{
  text-decoration: none;
}

<a>Dies verhindert das Unterstreichen aller Tags, was die Hauptursache für dieses Problem ist

Arbeiten Sie für mich, fügen Sie einfach className="nav-link"undactiveStyle{{textDecoration:'underline'}}

<NavLink className="nav-link" to="/" exact activeStyle= 
  {{textDecoration:'underline'}}>My Record</NavLink>

Schauen Sie hier -> https://material-ui.com/guides/composition/#button .

Dies ist der offizielle Material-UI-Leitfaden. Vielleicht ist es für dich so nützlich wie für mich.

In einigen Fällen bleibt die Unterstreichung jedoch bestehen, und Sie möchten möglicherweise die Textdekoration verwenden: "keine" dafür. Für einen saubereren Ansatz können Sie makeStyles aus material-ui / core importieren und verwenden.

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
    menu-btn: {
        textDecoration: 'none',
    },
}));

const classes = useStyles();

Setzen Sie dann das Attribut className in Ihrem JSX-Code auf {classes.menu-btn}.

Wenn Sie in Ihrem Inspektor nachsehen, werden Sie feststellen, dass die Verwendung von Komponenten den voreingestellten Farbwert ergibt, um die Antwort von @ Grgur zu erweitern . Sie müssen dies zusammen mit dem überschreiben, wenn Sie nicht möchten, dass es wie ein Standard-Hyperlink aussieht.Linkcolor: -webkit-linktextDecoration

style={{ backgroundImage: "none" }}

Nur das hat bei mir funktioniert

a:-webkit-any-link {
  text-decoration: none;
  color: inherit;
}

<Link to="/page">
    <Box sx={{ display: 'inline-block' }}>
        <PLink variant="primary">Page</PLink>
    </Box>
</Link>

In einigen Fällen verhindert das <Link>Hinzufügen eines divwith display: 'inline-block'um die innere Komponente, wenn eine andere Komponente innerhalb der Gatsby- Komponente verwendet wird , das Unterstreichen (von 'Seite' im Beispiel).

Wenn jemand nach material-uider Link-Komponente sucht . Fügen Sie einfach die Eigenschaft hinzu underlineund setzen Sie sie auf none

<Link underline="none">...</Link>

Ich habe ein Problem wie das Ihre gelöst. Ich habe versucht, das Element in Firefox zu untersuchen. Ich werde Ihnen einige Ergebnisse zeigen:

1. Es ist nur das Element, das ich inspizieren muss. Die "Link" -Komponente wird in "ein" Tag konvertiert, und "in" Requisiten werden in die "href" -Eigenschaft konvertiert:

2. Und wenn ich einkreuze: hov und Option: hover und hier ist das Ergebnis:

Wie Sie sehen, haben ein: Schwebeflug Textdekoration: unterstreichen. Ich füge nur zu meiner CSS-Datei hinzu:

a:hover {
 text-decoration: none;
}

und Problem ist gelöst. Aber ich habe auch Textdekoration eingestellt: keine in anderen Klassen (wie Sie: D), die möglicherweise einige Effekte haben (ich denke).

Was für mich funktioniert hat, ist Folgendes:

<Link to="/" style={{boxShadow: "none"}}>