javascript - with - styled components link react router




Como se livrar do sublinhado para o componente Link do React Router? (7)

Eu tenho o seguinte:

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


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

Eu acho que a melhor maneira de usar o link react-router-dom em um MenuItem (e outro componente do MaterialUI, como botões) é passar o Link no suporte do "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


Existe a abordagem nuclear que está no seu App.css (ou homólogo)

a{
  text-decoration: none;
}

que impede o sublinhado de todas as tags <a> que é a causa raiz desse problema


Há também outra maneira de remover corretamente o estilo do link. Você tem que dar a ele o estilo de textDecoration='inherit' e color='inherit' você pode adicioná-los como estilo à tag de link como:

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

ou para torná-lo mais genérico basta criar uma classe css como:

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

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


Para expandir a resposta do @grgur , se você olhar no seu inspetor, verá que usar os componentes do Link fornece a cor do valor de cor predefinido color: -webkit-link . Você precisará substituir isso junto com o textDecoration se você não quiser que ele pareça um hiperlink padrão.


Se você estiver usando styled-components , poderá 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} />;

Você pode adicionar o style={{ textDecoration: 'none' }} no seu componente Link para remover o sublinhado. Você também pode adicionar mais css no bloco de style , por exemplo, style={{ textDecoration: 'none', color: 'white' }} .

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1> 




react-router