¿Cómo deshacerse del subrayado del componente Link de React Router?
Tengo lo siguiente:
¿Cómo me deshago del subrayado azul? El código está a continuación:
<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
Veo que estás usando estilos en línea. textDecoration: 'none'se utiliza en niños, cuando en realidad debería utilizarse 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, razón por la cual aplicamos textDecorationla regla allí.
Creo que la mejor manera de usar el enlace reaccionar-router-dom en un elemento de menú (y otros componentes de 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 'a' del "MenuItem" (que se pasará al componente Link). De esta manera no es necesario agregar ningún estilo ya que utilizará el estilo MenuItem.
Si estás usando styled-components, podrías 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. 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 crea 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 puedes 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>
