Comment se débarrasser du soulignement pour le composant Link de React Router ?

Question

J'ai les éléments suivants :

Comment se débarrasser du soulignement bleu ? Le code est ci-dessous :

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

Le composant MenuItem est issu de http://www.material-ui.com/#/components/menu

Answer 1

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

Answer 2

Si quelqu'un cherche material-ui Le composant Link de l'UE. Il suffit d'ajouter la propriété underline et le mettre à zéro

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

Answer 3

Il y a l'approche nucléaire qui se trouve dans votre App.css (ou homologue)

a{
  text-decoration: none;
}

qui empêche le soulignement pour tous les <a> tags qui sont la cause première de ce problème.

Answer 4

//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>

Answer 5

C'est assez simple. Il suffit d'ajouter ceci style={{ textDecoration: 'none' }} à l'intérieur de votre <Link> étiquette

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