Como remover o sublinhado do componente Link do Roteador React?


121

Eu tenho o seguinte:

insira a descrição da imagem aqui

Como faço para me livrar do sublinhado azul? O código está abaixo:

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

O componente MenuItem é de http://www.material-ui.com/#/components/menu

Qualquer visão ou orientação seria muito apreciada. Agradeço antecipadamente.


7
colocar textDecoration: 'none'no <Link />componente, não em seus filhos.
azium

Respostas:


160

Vejo que você está usando estilos embutidos. textDecoration: 'none'é usado em crianças, onde na verdade deveria ser usado <Link>como tal:

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

<Link>irá essencialmente retornar uma <a>tag padrão , e é por isso que aplicamos a textDecorationregra lá.

Espero que ajude


2
existe uma maneira de definir global com nenhum textdecoration? no app.css?
stackdave

3
Funciona :). Esteja ciente de que se você copiar e colar o estilo em seu .css (porque, é claro, você não gosta de estilos embutidos), entãotext-decoration: none;
David Torres

64

Se você estiver usando styled-components, pode fazer algo assim:

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

63

Acho que a melhor maneira de usar o link react-router-dom em um MenuItem (e outro componente MaterialUI, como botões) é passar o link na prop "componente"

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

você precisa passar o caminho da rota no prop 'to' do "MenuItem" (que será passado para o componente Link). Desta forma, você não precisa adicionar nenhum estilo, pois ele usará o estilo MenuItem


8
A sua definitivamente deve ser a resposta em 2019.
Pablo Anaya

5
Esta é uma solução melhor do que as respostas acima.
Martin Nuc

1
Esta é definitivamente a melhor solução das postadas
royalaid

Isso é 100 vezes melhor do que os documentos, eles adoram muitos códigos inúteis
coiso,

Todas as outras respostas me assustam
coiso

30

Também há outra maneira de remover adequadamente o estilo do link. Você tem que dar um estilo de textDecoration='inherit'e color='inherit'pode adicioná-los como estilo à tag do link, como:

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

ou para torná-lo mais geral, basta criar uma classe css como:

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

E então apenas <Link className='text-link'>


você já tentou minha solução stackoverflow.com/a/55693040/3000540
Daniele Urania

9

Você pode adicionar style={{ textDecoration: 'none' }}seu Linkcomponente para remover o sublinhado. Você também pode adicionar mais cssno stylebloco, por exemplo 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

Existe a abordagem nuclear que está em seu App.css (ou contraparte)

a{
  text-decoration: none;
}

o que evita o sublinhado para todas as <a>tags, que é a causa raiz deste problema


Não é uma solução para react and styled-jsx…
AntonAL

na verdade, é uma solução que funcionou para mim, pois estou usando atrevimento ao lado da minha reação e usando todas as soluções acima não acionou o estilo do componente <link>.
Ahmed Younes

4

Trabalhando para mim, basta adicionar className="nav-link"eactiveStyle{{textDecoration:'underline'}}

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

2

Veja aqui -> https://material-ui.com/guides/composition/#button .

Este é o guia oficial do material-ui. Talvez seja útil para você como foi para mim.

No entanto, em alguns casos, o sublinhado persiste e você pode querer usar decoração de texto: "nenhum" para isso. Para uma abordagem mais limpa, você pode importar e usar makeStyles de material-ui / core.

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

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

const classes = useStyles();

Em seguida, defina o atributo className como {classes.menu-btn} em seu código JSX.


Decidi informá-lo que, ano depois, esta era a resposta de que precisava, obrigado!
kbreezy04

1

Para expandir a resposta de @ Grgur , se você olhar em seu inspetor, verá que o uso de Linkcomponentes fornece a eles o valor de cor predefinido color: -webkit-link. Você precisará substituir isso junto com o textDecorationse não quiser que pareça um hiperlink padrão.

insira a descrição da imagem aqui



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>

Em alguns casos, ao usar outro componente dentro do <Link>componente Gatsby , adicionar um divcom display: 'inline-block'ao redor do componente interno evita o sublinhado (de 'Página' no exemplo).


0

Se alguém estiver procurando pelo material-uicomponente Link de. Basta adicionar a propriedade underlinee defini-la como nenhum

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


0

Resolvi um problema talvez parecido com o seu. Tentei inspecionar o elemento no firefox. Vou mostrar alguns resultados:

  1. É apenas o elemento que inspecionei. O componente "Link" será convertido para a tag "a" e os adereços "para" serão convertidos para a propriedade "href":

  1. E quando eu tico em: hov e option: hover e aqui está o resultado:

Como você pode ver, a: hover tem text-decoration: underline. Eu apenas adiciono ao meu arquivo css:

a:hover {
 text-decoration: none;
}

e o problema está resolvido. Mas também configurei text-decoration: none em algumas outras classes (como você: D), que pode fazer alguns efeitos (eu acho).


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.