wake-up-neo.com

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

Ich habe folgendes: 

 enter image description here

Wie löse 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 aus http://www.material-ui.com/#/components/menu

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

javascriptreactjsreact-router
47
Jo Ko

Ich sehe, dass Sie Inline-Styles verwenden. textDecoration: 'none' wird im Kind verwendet, wobei es eigentlich in <Link> als solches verwendet werden sollte:

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

<Link> wird im Wesentlichen ein standardmäßiges <a>-Tag zurückgeben, weshalb wir dort die textDecoration-Regel anwenden.

Ich hoffe das hilft

75
Grgur

Wenn Sie styled-components verwenden, 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} />;
29
JoeTidee

Sie können style={{ textDecoration: 'none' }} in Ihre Link-Komponente einfügen, um die Unterstreichung zu entfernen. Sie können auch weitere css im style-Block hinzufügen, z. style={{ textDecoration: 'none', color: 'white' }}.

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

Wenn Sie für mich arbeiten, fügen Sie einfach className="nav-link" und activeStyle{{textDecoration:'underline'}} hinzu.

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

// 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>
1
Kushal Atreya

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 Requisite "component" 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 Requisite 'to' des "MenuItem" (das an die Link-Komponente weitergegeben wird) übergeben. Auf diese Weise müssen Sie keinen Stil hinzufügen, da der MenuItem-Stil verwendet wird

1
datatracer

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

a{
  text-decoration: none;
}

dies verhindert die Unterstreichung für alle <a>-Tags, die die Hauptursache dieses Problems sind

0
Dave Pile

Was bei mir funktioniert hat, ist Folgendes:

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

Wenn Sie in @ Grgurs Antwort nachschauen, werden Sie feststellen, dass Sie mit Link-Komponenten den voreingestellten Farbwert color: -webkit-link erhalten. Sie müssen dies zusammen mit der textDecoration überschreiben, wenn Sie nicht möchten, dass es wie ein Standard-Hyperlink aussieht. 

 enter image description here

0
AlleyOOP

Es gibt auch eine andere Möglichkeit, das Styling des Links ordnungsgemäß zu entfernen. Sie müssen den Stil textDecoration='inherit' und color='inherit' angeben. Sie können diese entweder als Stil zum Link-Tag hinzufügen, z.

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

oder um es allgemeiner zu machen, erstelle einfach eine CSS-Klasse wie:

.text-link {
    color: inherit;
    text-decoration: inherit;
}

Und dann nur noch <Link className='text-link'>

0
Panos