web-dev-qa-db-fra.com

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

J'ai le suivant: 

 enter image description here

Comment puis-je me 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 provient de http://www.material-ui.com/#/components/menu

Toute idée ou orientation serait grandement appréciée. Merci d'avance.

javascriptreactjsreact-router
47
Jo Ko

Je vois que vous utilisez des styles en ligne. textDecoration: 'none' est utilisé dans enfant alors qu'en fait, il devrait être utilisé dans <Link> en tant que tel:

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

<Link> renverra essentiellement une balise <a> standard, raison pour laquelle nous appliquons la règle textDecoration à cet emplacement.

J'espère que ça aide

75
Grgur

Si vous utilisez styled-components, vous pouvez faire quelque chose comme ceci:

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

Vous pouvez ajouter style={{ textDecoration: 'none' }} dans votre composant Link pour supprimer le soulignement. Vous pouvez également ajouter plus de css dans le bloc style, par exemple. style={{ textDecoration: 'none', color: 'white' }}.

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

Travaillant pour moi, il suffit d’ajouter className="nav-link" et activeStyle{{textDecoration:'underline'}}

<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

Je pense que la meilleure façon d'utiliser le lien react-router-dom dans un MenuItem (et d'autres composants de MaterialUI tels que des boutons) est de passer le lien dans le prop

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

vous devez passer le chemin de la route dans l'accessoire 'à' du "MenuItem" (qui sera transmis au composant Link). De cette façon, vous n'avez pas besoin d'ajouter de style car le style MenuItem sera utilisé.

1
datatracer

Il y a l'approche nucléaire qui est dans votre App.css (ou contrepartie)

a{
  text-decoration: none;
}

qui empêche le soulignement pour toutes les balises <a> qui est la cause première de ce problème

0
Dave Pile

Ce qui a fonctionné pour moi est la suivante:

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

Pour développer la réponse de @ Grgur , si vous consultez l'inspecteur, vous constaterez que l'utilisation de composants Link leur attribue la valeur de couleur prédéfinie color: -webkit-link. Si vous ne voulez pas que cela ressemble à un lien hypertexte par défaut, vous devrez le remplacer par la variable textDecoration. 

 enter image description here

0
AlleyOOP

Il existe également un autre moyen de supprimer correctement le style du lien. Vous devez lui donner le style de textDecoration='inherit' et color='inherit' vous pouvez soit ajouter ceux-ci en tant que style à la balise link comme:

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

ou pour le rendre plus général, créez simplement une classe css comme:

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

Et puis juste <Link className='text-link'>

0
Panos