¿Cómo deshacerse del subrayado para el componente Link de React Router?

Tengo lo siguiente:

¿Cómo me deshago del subrayado azul? El código está abajo:

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

El componente MenuItem es de http://www.material-ui.com/#/components/menu

Cualquier idea u orientación sería muy apreciada. Gracias de antemano.

Veo que estás usando estilos en línea. textDecoration: 'none'se usa en niños, donde de hecho debe usarse en interiores <Link>como tal:

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

<Link>Básicamente, devolverá una <a>etiqueta estándar , por lo que aplicamos la textDecorationregla allí.

Espero que eso ayude

Si está usando styled-components, podría hacer algo como esto:

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

Creo que la mejor manera de usar el enlace react-router-dom en un MenuItem (y otro componente MaterialUI como los botones) es pasar el enlace en el "componente" prop

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

debe pasar la ruta de la ruta en el accesorio 'to' del "MenuItem" (que se pasará al componente Link). De esta manera, no es necesario agregar ningún estilo, ya que usará el estilo MenuItem

También hay otra forma de eliminar correctamente el estilo del enlace. Tienes que darle estilo textDecoration='inherit'y color='inherit'puedes agregarlos como estilo a la etiqueta del enlace como:

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

o para hacerlo más general, simplemente cree una clase css como:

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

Y luego solo <Link className='text-link'>

Puede agregar style={{ textDecoration: 'none' }}su Linkcomponente para eliminar el subrayado. También puede agregar más cssen el stylebloque, por ejemplo 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 el enfoque nuclear que está en su App.css (o contraparte)

a{
  text-decoration: none;
}

que evita el subrayado para todas las <a>etiquetas, que es la causa principal de este problema

Trabajando para mí, solo agrega className="nav-link"yactiveStyle{{textDecoration:'underline'}}

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

Mire aquí -> https://material-ui.com/guides/composition/#button .

Esta es la guía oficial de material-ui. Quizás te sea útil como lo fue para mí.

Sin embargo, en algunos casos, el subrayado persiste y es posible que desee utilizar text-decoration: "none" para eso. Para un enfoque más limpio, puede importar y usar makeStyles desde material-ui / core.

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

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

const classes = useStyles();

Y luego establezca el atributo className en {classes.menu-btn} en su código JSX.

Para ampliar la respuesta de @ Grgur , si mira en su inspector, encontrará que el uso de Linkcomponentes les da el valor de color preestablecido color: -webkit-link. Deberá anular esto junto con el textDecorationsi no desea que se vea como un hipervínculo predeterminado.

style={{ backgroundImage: "none" }}

Solo esto funcionó para mi

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

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

En algunos casos, cuando se usa otro componente dentro del <Link>componente Gatsby , agregar un divcon display: 'inline-block'alrededor del componente interno evita el subrayado (de 'Página' en el ejemplo).

Si alguien está buscando material-uiel componente Link. Simplemente agregue la propiedad underliney configúrela como ninguna

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

He resuelto un problema tal vez como el tuyo. Intenté inspeccionar el elemento en Firefox. Te mostraré algunos resultados:

1. Es solo el elemento que he inspeccionado. El componente "Enlace" se convertirá en una etiqueta "a" y los accesorios "a" se convertirán en la propiedad "href":

2. Y cuando marco: hov y option: hover y aquí está el resultado:

Como ve, un: hover tiene text-decoration: underline. Solo agrego a mi archivo css:

a:hover {
 text-decoration: none;
}

y el problema se resuelve. Pero también configuro text-decoration: none en algunas otras clases (como tú: D), eso puede tener algunos efectos (supongo).

Lo que funcionó para mí es esto:

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