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

J'ai ce qui suit:

Comment supprimer le trait de 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

Tout aperçu ou conseil serait grandement apprécié. Merci d'avance.

Je vois que vous utilisez des styles en ligne. textDecoration: 'none'est utilisé chez child, où en fait il devrait être utilisé à l'intérieur <Link>comme tel:

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

<Link>renverra essentiellement une <a>balise standard , c'est pourquoi nous y appliquons une textDecorationrègle.

J'espère que ça aide

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

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

<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 le prop 'to' du "MenuItem" (qui sera transmis au composant Link). De cette façon, vous n'avez pas besoin d'ajouter de style car il utilisera le style MenuItem

Il existe également un autre moyen de supprimer correctement le style du lien. Vous devez lui donner un style textDecoration='inherit'et color='inherit'vous pouvez soit les ajouter comme style à la balise de lien 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'>

Vous pouvez ajouter style={{ textDecoration: 'none' }}votre Linkcomposant pour supprimer le soulignement. Vous pouvez également ajouter plus cssdans le stylebloc, par exemple style={{ textDecoration: 'none', color: 'white' }}.

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

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

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

a{
  text-decoration: none;
}

ce qui empêche le soulignement de toutes les <a>balises, ce qui est à l'origine de ce problème

Travailler pour moi, il suffit d'ajouter className="nav-link"etactiveStyle{{textDecoration:'underline'}}

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

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

Ceci est le guide officiel de Material-ui. Peut-être que ça vous sera utile comme ça l'était pour moi

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

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

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

const classes = useStyles();

Et puis définissez l'attribut className sur {classes.menu-btn} dans votre code JSX.

Pour développer la réponse de @ Grgur , si vous regardez dans votre inspecteur, vous constaterez que l'utilisation de Linkcomposants leur donne la valeur de couleur prédéfinie color: -webkit-link. Vous devrez remplacer cela avec le textDecorationsi vous ne voulez pas qu'il ressemble à un lien hypertexte par défaut.

style={{ backgroundImage: "none" }}

Seulement cela a fonctionné pour moi

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

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

Dans certains cas, lors de l'utilisation d'un autre composant à l'intérieur du <Link>composant Gatsby , l'ajout d'un divavec display: 'inline-block'autour du composant interne empêche le soulignement (de «Page» dans l'exemple).

Si quelqu'un recherche material-uile composant Link. Ajoutez simplement la propriété underlineet définissez-la sur aucune

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

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

1. Ce n'est que l'élément que j'ai inspecté. Le composant "Link" sera converti en "une" balise, et les accessoires "to" seront convertis en propriété "href":

2. Et quand je coche: hov et option: hover et voici le résultat:

Comme vous le voyez, un: hover a text-decoration: underline. J'ajoute uniquement à mon fichier css:

a:hover {
 text-decoration: none;
}

et le problème est résolu. Mais j'ai également mis du texte-décoration: aucun dans une autre classe (comme vous: D), cela peut faire des effets (je suppose).

Ce qui a fonctionné pour moi, c'est ceci:

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