Como remover o sublinhado do componente Link do Roteador React?

Eu tenho o seguinte:

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.

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

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

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

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

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

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

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

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

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.

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.

style={{ backgroundImage: "none" }}

Só isso funcionou para mim

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

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

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

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

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

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

O que funcionou para mim é o seguinte:

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