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

Le soulignement provient par défaut de la react-router-dom paquet. Vous pouvez procéder comme suit pour résoudre ce problème.

<Link to="/route-path" style={{ textDecoration: 'none' }}> 
    // Rest of the code
</Link>

Answer 2

Regardez ici -> https://material-ui.com/guides/composition/#button .

C'est le guide officiel de material-ui. Il vous sera peut-être utile comme il l'a été pour moi.

Cependant, dans certains cas, le soulignement persiste et vous pouvez vouloir utiliser text-decoration : "none" pour cela. Pour une approche plus propre, vous pouvez importer et utiliser makeStyles de material-ui/core.

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

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

const classes = useStyles();

Et ensuite, définissez l'attribut className à {classes.menu-btn} dans votre code JSX.

Answer 3

Ça marche pour moi, il suffit d'ajouter className="nav-link" y activeStyle{{textDecoration:'underline'}}

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

Answer 4

J'ai résolu un problème peut-être comme le vôtre. J'ai essayé d'inspecter l'élément dans firefox. Je vais vous montrer quelques résultats :

1. C'est seulement l'élément que j'ai inspecté. Le composant "Link" sera converti en balise "a", et les props "to" seront convertis en propriété "href" :

2. Et quand je coche la case :hov et l'option :hover, voici le résultat :

Comme vous le voyez a:hover a text-decoration : underline. J'ai seulement ajouté à mon fichier css :

a:hover {
 text-decoration: none;
}

et le problème est résolu. Mais j'ai également défini text-decoration : none dans d'autres classes (comme vous :D), ce qui peut avoir des effets (je suppose).

Answer 5

<Link
   to='/maxpain'
   replace
   style={{
           textDecoration: 'none'
          }}
   >
     <LinkText>Click here!</LinkText>
</Link>

C'est aussi simple que cela !