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

Имею следующее:

Как избавиться от синего подчеркивания? Код ниже:

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

Компонент MenuItem взят из http://www.material-ui.com/#/components/menu

Мы будем очень благодарны за любую информацию или руководство. Заранее спасибо.

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

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

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

Надеюсь, это поможет

Если вы используете 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} />;

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

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

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

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

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

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

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

А потом просто <Link className='text-link'>

Вы можете добавить 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> 

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

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

a{
  text-decoration: none;
}

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

Работаю на меня, просто добавь className="nav-link"иactiveStyle{{textDecoration:'underline'}}

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

Посмотрите здесь -> https://material-ui.com/guides/composition/#button .

Это официальное руководство по пользовательскому интерфейсу. Может быть, вам это пригодится, как и мне.

Однако в некоторых случаях подчеркивание сохраняется, и вы можете использовать для этого text-decoration: «none». Для более чистого подхода вы можете импортировать и использовать makeStyles из material-ui / core.

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

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

const classes = useStyles();

А затем установите для атрибута className значение {classes.menu-btn} в коде JSX.

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

style={{ backgroundImage: "none" }}

Только это сработало для меня

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

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

В некоторых случаях при использовании другого компонента внутри компонента Gatsby <Link>добавление символа divwith display: 'inline-block'вокруг внутреннего компонента предотвращает подчеркивание (в примере «Страница»).

Если кто-то ищет material-uiкомпонент Link. Просто добавьте свойство underlineи установите для него значение none

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

Я решил проблему, похожую на вашу. Я попытался проверить элемент в firefox. Я покажу вам некоторые результаты:

1. Это только элемент, который я проверил. Компонент "Link" будет преобразован в тег "a", а реквизиты "to" будут преобразованы в свойство "href":

2. И когда я ставлю галочку: hov и option: hover, и вот результат:

Как видите, у: hover есть text-decoration: underline. Я только добавляю в свой файл css:

a:hover {
 text-decoration: none;
}

и проблема решена. Но я также установил text-decoration: none в каких-то других классах (например, вы: D), которые могут иметь некоторые эффекты (я думаю).

Для меня сработало следующее:

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