Come sbarazzarsi della sottolineatura per il componente Link di React Router?

Ho il seguente:

Come posso eliminare la sottolineatura blu? Il codice è di seguito:

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

Il componente MenuItem proviene da http://www.material-ui.com/#/components/menu

Qualsiasi intuizione o guida sarebbe molto apprezzata. Grazie in anticipo.

Vedo che stai usando stili in linea. textDecoration: 'none'si usa nel bambino, dove infatti va usato all'interno <Link>come tale:

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

<Link>essenzialmente restituirà un <a>tag standard , motivo per cui applichiamo la textDecorationregola lì.

Spero che aiuti

Se stai usando styled-components, potresti fare qualcosa del genere:

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

Penso che il modo migliore per utilizzare il collegamento react-router-dom in un MenuItem (e altri componenti MaterialUI come i pulsanti) sia passare il collegamento nel prop "component"

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

è necessario passare il percorso del percorso nel prop "to" del "MenuItem" (che verrà passato al componente Link). In questo modo non è necessario aggiungere alcuno stile in quanto utilizzerà lo stile MenuItem

C'è anche un altro modo per rimuovere correttamente lo stile del collegamento. Devi dargli uno stile textDecoration='inherit'e color='inherit'puoi aggiungerli come stile al tag del link come:

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

o per renderlo più generale basta creare una classe CSS come:

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

E poi solo <Link className='text-link'>

Puoi aggiungere il style={{ textDecoration: 'none' }}tuo Linkcomponente per rimuovere la sottolineatura. Puoi anche aggiungere altro cssnel styleblocco es 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>

C'è l'approccio nucleare che è nella tua App.css (o controparte)

a{
  text-decoration: none;
}

che impedisce la sottolineatura per tutti i <a>tag che è la causa principale di questo problema

Lavorando per me, aggiungi className="nav-link"eactiveStyle{{textDecoration:'underline'}}

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

Guarda qui -> https://material-ui.com/guides/composition/#button .

Questa è la guida ufficiale ai materiali. Forse ti sarà utile come lo è stato per me.

Tuttavia, in alcuni casi, la sottolineatura persiste e potresti voler usare la decorazione del testo: "nessuno" per quello. Per un approccio più pulito, puoi importare e utilizzare makeStyles da material-ui / core.

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

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

const classes = useStyles();

E quindi imposta l'attributo className su {classes.menu-btn} nel tuo codice JSX.

Per espandere la risposta di @ Grgur , se guardi nel tuo ispettore, scoprirai che l'uso dei Linkcomponenti dà loro il valore di colore preimpostato color: -webkit-link. Dovrai sovrascriverlo insieme a textDecorationse non vuoi che assomigli a un collegamento ipertestuale predefinito.

style={{ backgroundImage: "none" }}

Solo questo ha funzionato per me

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

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

In alcuni casi, quando si utilizza un altro componente all'interno del <Link>componente Gatsby , l'aggiunta di un divcon display: 'inline-block'attorno al componente interno impedisce la sottolineatura (di "Pagina" nell'esempio).

Se qualcuno sta cercando material-uiil componente Link di. Basta aggiungere la proprietà underlinee impostarla su nessuno

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

Ho risolto un problema forse come il tuo. Ho provato a ispezionare l'elemento in Firefox. Ti mostrerò alcuni risultati:

1. È solo l'elemento che devo ispezionare. Il componente "Link" verrà convertito in tag "a" e gli oggetti di scena "in" verranno convertiti nella proprietà "href":

2. E quando spunta: hov e option: hover ed ecco il risultato:

Come vedi a: hover ha text-decoration: underline. Aggiungo solo al mio file css:

a:hover {
 text-decoration: none;
}

e il problema è risolto. Ma ho anche impostato la decorazione del testo: nessuna in altre classi (come te: D), che potrebbe produrre alcuni effetti (immagino).

Quello che ha funzionato per me è questo:

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