Comment se débarrasser de souligner le Lien de la composante de Réagir Routeur?

J'ai le texte suivant:

Comment se débarrasser de souligner le Lien de la composante de Réagir Routeur?

Comment puis-je me débarrasser de l'bleue souligner?
Le code est ci-dessous: 

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

La MenuItem composant est de http://www.material-ui.com/#/components/menu

Aucune information ou des conseils seraient grandement appréciés. Je vous remercie à l'avance.

  • mettre textDecoration: 'none' sur le <Link /> composant pas ses enfants.
InformationsquelleAutor Jo Ko | 2016-06-07
  1. 96

    Je vois que vous êtes en utilisant des styles en ligne. textDecoration: 'none' est utilisé dans l'enfant, où en fait il doit être utilisé à l'intérieur de <Link> en tant que tel:

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

    <Link> essentiellement de retourner <a> tag, qui est pourquoi nous nous appliquons textDecoration règle.

    J'espère que ça aide

    • il y a un moyen de régler global avec textdecoration aucun ? dans l'application.css ?
    • Il fonctionne :). Sachez que si vous copiez coller le style de votre .css (parce que, évidemment, vous n'aimez pas les styles en ligne) puis est text-decoration: none;
    InformationsquelleAutor Grgur
  2. 42

    Si vous utilisez styled-components, vous pourriez faire quelque chose comme ceci:

    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} />;
    InformationsquelleAutor JoeTidee
  3. 8

    Vous pouvez ajouter style={{ textDecoration: 'none' }} dans votre Link composant pour supprimer le soulignement. Vous pouvez également ajouter plus de css dans le style bloc par exemple style={{ textDecoration: 'none', color: 'white' }}.

    <h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1>
    InformationsquelleAutor Shubham Verma
  4. 5

    Je pense que la meilleure façon d'utiliser réagir-routeur-dom Lien dans un MenuItem (et d'autres MaterialUI de composants tels que des boutons) est de faire passer le Lien dans le "composant" prop

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

    vous avez besoin pour passer la voie de chemin d'accès dans le " à " prop de la "MenuItem" (qui sera transmis le Lien de la composante).
    De cette façon, vous n'avez pas besoin d'ajouter n'importe quel style car il utilise la MenuItem style

    • La vôtre doit certainement être la réponse en 2019.
    InformationsquelleAutor datatracer
  5. 3

    //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>
    InformationsquelleAutor Kushal Atreya
  6. 2

    Il y a l'approche nucléaire qui est dans votre Application.css (ou de contrepartie)

    a{
  text-decoration: none;
}

    qui l'empêche de souligner pour tous <a> balises qui est la cause de ce problème

    • Pas une solution pour réagir et de style-jsx...
    • en fait sa une solution, il a travaillé pour moi que la messagerie instantanée à l'aide de sass à côté de mon réagir et l'utilisation de toutes les solutions ci-dessus ne déclenchent pas de <lien> style de composant ..
    InformationsquelleAutor Dave Pile
  7. 1

    De s'étendre sur les @Grgur réponse, si vous regardez dans votre inspecteur, vous trouverez que l'utilisation de Link composants, leur donne de la couleur prédéfinie valeur color: -webkit-link. Vous aurez besoin de le remplacer avec de l' textDecoration si vous ne voulez pas ressembler à un défaut de lien hypertexte.

    Comment se débarrasser de souligner le Lien de la composante de Réagir Routeur?

    InformationsquelleAutor AlleyOOP
  8. 1

    Il y a aussi une autre façon de supprimer correctement le style du lien. Vous devez donner le style de textDecoration='inherit' et color='inherit' vous pouvez ajouter ceux que le style à la balise de lien comme:

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

    ou pour le rendre plus général, il suffit de créer une classe css comme:

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

    Et puis juste <Link className='text-link'>

    InformationsquelleAutor Panos
  9. 0

    Ce qui a fonctionné pour moi, c'est ceci:

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