Как избавиться от подчеркивания для компонента Link React Router?

Ответ 1

Я вижу, что вы используете встроенные стили. textDecoration: 'none' используется в child, где на самом деле он должен использоваться внутри <Link> как таковой:

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

<Link> по существу вернет стандартный тег <a>, поэтому мы применяем там правило textDecoration.

Я надеюсь, что это поможет

Ответ 2

Если вы используете styled-components, вы можете сделать что-то вроде этого:

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

Ответ 3

Вы можете добавить style={{ textDecoration: 'none' }} в свой компонент Link чтобы удалить подчеркивание. Вы также можете добавить больше css в блок style например style={{ textDecoration: 'none', color: 'white' }}.

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

Ответ 4

Я думаю, что лучший способ использовать Resact-router-Dom Link в MenuItem (и другой компонент MaterialUI, например, кнопки), это передать ссылку в "компонент" проп

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

вам нужно передать путь маршрута в подпункте "to" "MenuItem" (который будет передан компоненту Link). Таким образом, вам не нужно добавлять какой-либо стиль, так как он будет использовать стиль MenuItem

Ответ 5

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

Ответ 6

Есть ядерный подход, который есть в вашем App.css (или аналоге)

a{
  text-decoration: none;
}

что предотвращает подчеркивание для всех тегов <a> которые являются основной причиной этой проблемы

Ответ 7

Чтобы развернуть ответ @Grgur, если вы заглянете в свой инспектор, вы обнаружите, что использование компонентов Link дает им предустановленное значение color: -webkit-link. Вам нужно переопределить это вместе с textDecoration если вы не хотите, чтобы он выглядел как гиперссылка по умолчанию.

Ответ 8

Есть также другой способ правильно удалить стилизацию ссылки. Вы должны textDecoration='inherit' ему стиль textDecoration='inherit' и color='inherit' вы можете добавить их в качестве стиля к тегу ссылки, например:

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

или чтобы сделать его более общим, просто создайте класс CSS, например:

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

И тогда просто <Link className='text-link'>

Ответ 9

Что сработало для меня это:

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