Comment se débarrasser du soulignement pour le composant Link de React Router ?

Question

J'ai les éléments suivants :

Comment se débarrasser du soulignement bleu ? Le code est ci-dessous :

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

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

Answer 1

Je vois que vous utilisez des styles en ligne. textDecoration: 'none' est utilisé dans child, alors qu'en fait il devrait être utilisé à l'intérieur de <Link> comme tel :

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

<Link> retournera essentiellement un <a> c'est pourquoi nous appliquons la balise textDecoration règle là-bas.

J'espère que cela vous aidera.

Answer 2

Je pense que la meilleure façon d'utiliser le lien react-router-dom dans un MenuItem (et d'autres composants MaterialUI comme les boutons) est de passer le lien dans la prop "component".

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

vous devez transmettre le chemin d'accès dans la propriété "to" du "MenuItem" (qui sera transmis au composant Link). De cette façon, vous n'avez pas besoin d'ajouter de style, car il utilisera le style de l'élément de menu.

Answer 3

Si vous utilisez styled-components vous pourriez faire quelque chose comme ça :

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

Answer 4

Il existe également un autre moyen de supprimer correctement le style du lien. Vous devez lui donner un style de textDecoration='inherit' y color='inherit' vous pouvez soit les ajouter comme style à la balise du lien comme :

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

ou pour rendre cela 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'>

Answer 5

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

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1>