Jak pozbyć się podkreślenia w komponencie Link w React Router?

Mam:

Jak pozbyć się niebieskiego podkreślenia? Kod poniżej:

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

Składnik MenuItem pochodzi z http://www.material-ui.com/#/components/menu

Wszelkie spostrzeżenia lub wskazówki byłyby bardzo mile widziane. Z góry dziękuję.

Widzę, że używasz stylów wbudowanych. textDecoration: 'none'jest stosowany u dziecka, gdzie tak naprawdę powinien być używany wewnątrz <Link>:

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

<Link>zasadniczo zwróci standardowy <a>tag, dlatego stosujemy textDecorationtam regułę.

Mam nadzieję że to pomogło

Jeśli używasz styled-components, możesz zrobić coś takiego:

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

Myślę, że najlepszym sposobem użycia łącza react-router-dom w MenuItem (i innych komponentach MaterialUI, takich jak przyciski) jest przekazanie linku we właściwości „komponent”

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

musisz przekazać ścieżkę trasy we właściwości „do” elementu „MenuItem” (który zostanie przekazany do komponentu Link). W ten sposób nie musisz dodawać żadnego stylu, ponieważ użyje stylu MenuItem

Istnieje również inny sposób prawidłowego usunięcia stylu linku. Musisz nadać temu styl textDecoration='inherit'i color='inherit'możesz dodać je jako style do tagu linku, na przykład:

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

lub żeby było bardziej ogólnie, po prostu utwórz klasę css taką jak:

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

A potem po prostu <Link className='text-link'>

Możesz dodać style={{ textDecoration: 'none' }}swój Linkkomponent, aby usunąć podkreślenie. Możesz też dodać więcej cssw stylebloku np 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>

Istnieje podejście nuklearne, które jest w twoim App.css (lub odpowiedniku)

a{
  text-decoration: none;
}

co zapobiega podkreślaniu wszystkich <a>tagów, co jest główną przyczyną tego problemu

Pracując dla mnie, po prostu dodaj className="nav-link"iactiveStyle{{textDecoration:'underline'}}

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

Spójrz tutaj -> https://material-ui.com/guides/composition/#button .

To jest oficjalny przewodnik Material-UI. Może ci się przyda, tak jak dla mnie.

Jednak w niektórych przypadkach podkreślenie nie ustąpi i możesz chcieć użyć do tego dekoracji tekstu: „none”. Aby uzyskać bardziej przejrzyste podejście, możesz importować i używać makeStyles z material-ui / core.

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

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

const classes = useStyles();

Następnie ustaw atrybut className na {classes.menu-btn} w swoim kodzie JSX.

Aby rozwinąć odpowiedź @ Grgura , jeśli spojrzysz do swojego inspektora, zobaczysz, że użycie Linkkomponentów daje im wstępnie ustawioną wartość koloru color: -webkit-link. Musisz to zmienić wraz z, textDecorationjeśli nie chcesz, aby wyglądało jak domyślne hiperłącze.

style={{ backgroundImage: "none" }}

Tylko to działało dla mnie

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

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

W niektórych przypadkach, gdy używany jest inny komponent wewnątrz komponentu Gatsby <Link>, dodanie znaku divz display: 'inline-block'wokół komponentu wewnętrznego zapobiega podkreślaniu (w przykładzie „strony”).

Jeśli ktoś szuka material-uikomponentu Link. Po prostu dodaj właściwość underlinei ustaw ją na none

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

Mam rozwiązać problem, może taki jak twój. Próbowałem sprawdzić element w przeglądarce Firefox. Pokażę Ci kilka wyników:

1. To tylko element, który sprawdziłem. Komponent „Link” zostanie przekonwertowany na tag „a”, a właściwości „to” zostaną przekonwertowane na właściwość „href”:

2. A kiedy zaznaczę: hov i opcja: hover i oto wynik:

Jak widzisz a: hover mają tekst-dekorację: podkreślenie. Dodam tylko do mojego pliku css:

a:hover {
 text-decoration: none;
}

i problem został rozwiązany. Ale ustawiłem też dekorację tekstu: żadna w innych klasach (jak ty: D), to może mieć jakieś efekty (tak sądzę).

U mnie zadziałało:

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