Як позбутися підкреслення компонента 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} />;

Я думаю, що найкращий спосіб використовувати Link react-router-dom у MenuItem (та інший компонент MaterialUI, такий як кнопки) - це передати Посилання в опорному "компоненті"

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

вам потрібно пройти шлях маршруту в підпоріжці «до» менюItem (який буде переданий до компонента Посилання). Таким чином вам не потрібно додавати жодного стилю, оскільки він буде використовувати стиль 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 .

Це офіційний посібник з матеріалів ui. Можливо, вам це стане в нагоді так, як це було для мене.

Однак у деяких випадках підкреслення зберігається, і ви, можливо, захочете використовувати текстовий декор: "немає" для цього. Для більш чистого підходу ви можете імпортувати та використовувати makeStyles з material-ui / core.

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

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

const classes = useStyles();

А потім встановіть атрибут className до {class.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>

У деяких випадках, коли ви використовуєте інший компонент всередині компонента Гетсбі <Link>, додавання a divз display: 'inline-block'навколо внутрішнього компонента запобігає підкресленню (у прикладі "Сторінка").

Якщо хтось шукає material-uiкомпонент 'Link'. Просто додайте властивість underlineі встановіть його на жодне

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

Я вирішив проблему, можливо, як вашу. Я намагався оглянути елемент у firefox. Я покажу вам деякі результати:

1. Це лише елемент, який я оглядаю. Компонент "Посилання" буде перетворений у тег "a", а реквізит "до" буде перетворений у властивість "href":

2. І коли я вказую: hov та option: hover і ось результат:

Як ви бачите: наведіть курсор на текстовий декор: підкресліть. Я додаю лише до свого файлу css:

a:hover {
 text-decoration: none;
}

і проблема вирішена. Але я також встановив оформлення тексту: жоден в інших класах (як ти: D), це може зробити деякі ефекти (я думаю).

Що для мене спрацювало так:

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