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


122

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

введите описание изображения здесь

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

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

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

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


7
ставить textDecoration: 'none'на <Link />компоненте не его ребенок.
azium 07

Ответы:


161

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

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

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

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


2
есть ли способ установить глобальное с помощью textdecoration none? в app.css?
stackdave 08

3
Оно работает :). Имейте в виду, что если вы скопируете и вставите стиль в свой .css (потому что, конечно, вам не нравятся встроенные стили), то это будетtext-decoration: none;
Дэвид Торрес

64

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

63

Я думаю, что лучший способ использовать ссылку 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


8
Ваш ответ определенно должен стать ответом в 2019 году.
Пабло Анайя,

5
Это лучшее решение, чем ответы выше.
Martin

1
Это определенно лучшее решение из опубликованных
royalaid

Это в 100 раз лучше, чем в документации, там много бесполезного кода
coiso

Все остальные ответы пугают меня
coiso

31

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

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

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

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

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


пробовали ли вы мое решение? stackoverflow.com/a/55693040/3000540
Даниэле Урания

Это должен быть принятый ответ, поскольку он также устраняет изменение цвета. Кроме того, есть ли способ перевести этот класс CSS в JSS? У меня была такая же проблема с использованием material-ui, и использование опоры стиля помогло.
norman123123

9

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

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>

5

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

a{
  text-decoration: none;
}

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


Не решение для react и styled-jsx…
AntonAL

на самом деле это решение, которое сработало для меня, поскольку я использую sass рядом с моей реакцией, и использование всех вышеперечисленных решений не
Ахмед Юнес

4

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

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

2

Посмотрите здесь -> 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.


Подумал, что я дам вам знать, что год спустя это был ответ, который мне был нужен, спасибо!
kbreezy04

1

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

введите описание изображения здесь




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

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


0

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

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


0

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

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

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

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

a:hover {
 text-decoration: none;
}

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.