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


121

J'ai ce qui suit:

entrez la description de l'image ici

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.


7
mettez textDecoration: 'none'le <Link />composant et non ses enfants.
azium

Réponses:


160

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


2
il existe un moyen de définir global avec textdecoration aucun? dans l'app.css?
stackdave

3
Ça marche :). Sachez que si vous copiez-collez le style dans votre .css (parce que, bien sûr, vous n'aimez pas les styles en ligne) alors c'esttext-decoration: none;
David Torres

64

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

62

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


7
Le vôtre devrait certainement être la réponse en 2019.
Pablo Anaya

4
C'est une meilleure solution que les réponses ci-dessus.
Martin Nuc le

C'est certainement la meilleure solution de celles publiées
royalaid

C'est 100 fois mieux que la documentation, ils adorent beaucoup de code inutile
coiso

Toutes les autres réponses me font peur
coiso

30

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


avez-vous essayé ma solution stackoverflow.com/a/55693040/3000540
Daniele Urania

9

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> 

5

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

5

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


Pas une solution pour react et styled-jsx…
AntonAL

en fait, c'est une solution qui a fonctionné pour moi car j'utilise sass à côté de ma réaction et l'utilisation de toutes les solutions ci-dessus n'a pas déclenché le style de composant <link>.
Ahmed Younes

4

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>

2

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.


Je pensais que je vous ferais savoir que l'année plus tard, c'était la réponse dont j'avais besoin, merci!
kbreezy04

1

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.

entrez la description de l'image ici


1
style={{ backgroundImage: "none" }}

Seulement cela a fonctionné pour moi


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

0
<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).


0

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

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


0

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":

  1. 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).


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.