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

Pour développer Réponse de @Grgur Si vous regardez dans votre inspecteur, vous verrez que l'utilisation de l'option Link leur donne la valeur de couleur prédéfinie color: -webkit-link . Vous devrez remplacer cette option par l'option textDecoration si vous ne voulez pas qu'il ressemble à un hyperlien par défaut.

Answer 2

style={{ backgroundImage: "none" }}

Seulement ceci a fonctionné pour moi

Answer 3

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

Dans certains cas, lorsqu'on utilise un autre composant à l'intérieur de Gatsby <Link> en ajoutant un div avec display: 'inline-block' autour du composant interne, ce qui empêche le soulignement (de "Page" dans l'exemple).

Answer 4

Vous pouvez simplement utiliser ce morceau de code dans votre fichier scss ; Cela supprimera ce changement de couleur indésirable,

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

---

Answer 5

J'ai eu un problème où l'élément Link changeait mon h4 en 'underline', le réglage de text-decoration : 'none' ne fonctionnait pas, ma seule solution était d'utiliser un bouton à la place.

<Link to="/settings">
    <button>Settings</button>
</Link>