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


121

Ho il seguente:

inserisci qui la descrizione dell'immagine

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.


7
mettere textDecoration: 'none'sul <Link />componente non i suoi figli.
azium

Risposte:


160

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


2
c'è un modo per impostare globale con textdecoration nessuno? nell'app.css?
stackdave

3
Funziona :). Tieni presente che se copi e incolli lo stile nel tuo .css (perché, ovviamente, non ti piacciono gli stili in linea), allora ètext-decoration: none;
David Torres,

64

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

62

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


7
La tua dovrebbe essere sicuramente la risposta nel 2019.
Pablo Anaya,

4
Questa è una soluzione migliore rispetto alle risposte precedenti.
Martin Nuc

Questa è sicuramente la soluzione migliore tra quelle pubblicate
royalaid il

Questo è 100 volte meglio dei documenti, adorano un sacco di codice inutile
coiso

Tutte le altre risposte mi spaventano
coiso

30

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



9

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> 

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

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


Non è una soluzione per React e Styled-jsx…
AntonAL

in realtà è una soluzione che ha funzionato per me poiché sto usando sass oltre alla mia reazione e l'utilizzo di tutte le soluzioni di cui sopra non ha attivato lo stile del componente <link> ..
Ahmed Younes

4

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

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

2

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.


Pensavo di averti fatto sapere che quell'anno dopo questa era la risposta di cui avevo bisogno, grazie!
kbreezy04

1

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.

inserisci qui la descrizione dell'immagine


1
style={{ backgroundImage: "none" }}

Solo questo ha funzionato per me


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

0
<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).


0

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

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


0

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":

  1. 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).


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.