javascript - funciona - router link react example




¿Cómo deshacerse del subrayado para el componente Link del React Router? (7)

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

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.


Creo que la mejor manera de usar el enlace react-router-dom en un elemento de menú (y otro componente MaterialUI como botones) es pasar el enlace en el accesorio "componente"

<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 necesita agregar ningún estilo, ya que usará el estilo MenuItem


Lo que funcionó para mí es esto:

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

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


Si está utilizando styled-components con 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} />;

También hay otra forma de eliminar correctamente el estilo del enlace. textDecoration='inherit' darle un estilo de textDecoration='inherit' y color='inherit' puede agregarlos como estilo a la etiqueta de 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'>


Veo que estás usando estilos en línea. textDecoration: 'none' se usa en child, donde de hecho debería usarse dentro de <Link> como tal:

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

<Link> esencialmente devolverá una etiqueta <a> estándar, por lo que aplicamos la regla textDecoration allí.

Espero que eso ayude







react-router