React Router'ın Link bileşeni için alt çizgiden nasıl kurtulurum?

Aşağıdakilere sahibim:

Mavi alt çizgiden nasıl kurtulurum? Kod aşağıdadır:

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

MenuItem bileşeni http://www.material-ui.com/#/components/menu adresindendir

Herhangi bir içgörü veya rehberlik çok takdir edilecektir. Şimdiden teşekkür ederim.

Satır içi stilleri kullandığınızı görüyorum. textDecoration: 'none'aslında içeride kullanılması gerektiği çocukta kullanılır <Link>:

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

<Link>esasen standart bir <a>etiket döndürecektir , bu yüzden textDecorationorada kural uyguluyoruz.

umarım bu yardımcı olur

Eğer kullanıyorsanız styled-components, bunun gibi bir şey yapabilirsiniz:

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

Bir MenuItem'de (ve düğmeler gibi diğer MaterialUI bileşenlerinde) react-router-dom Link'i kullanmanın en iyi yolunun, Link'i "component" prop'undan geçirmek olduğunu düşünüyorum.

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

"MenuItem" öğesinin (Link bileşenine aktarılacak) 'to' pervanesindeki yol yolunu geçmeniz gerekir. Bu şekilde MenuItem stilini kullanacağı için herhangi bir stil eklemenize gerek yoktur.

Bağlantının stilini düzgün bir şekilde kaldırmanın başka bir yolu da var. Ona bir stil vermelisiniz textDecoration='inherit've color='inherit'bunları aşağıdaki gibi bağlantı etiketine stil olarak ekleyebilirsiniz:

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

veya daha genel hale getirmek için aşağıdaki gibi bir css sınıfı oluşturun:

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

Ve sonra sadece <Link className='text-link'>

Alt çizgiyi kaldırmak style={{ textDecoration: 'none' }}için Linkbileşeninize ekleyebilirsiniz . Ayrıca daha fazla ekleyebilirsiniz cssiçinde styleblok ör 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>

App.css'nizde (veya muadili) nükleer yaklaşım var

a{
  text-decoration: none;
}

<a>Bu sorunun temel nedeni olan tüm etiketlerin altının çizilmesini engelleyen

Benim için çalışıyorum, sadece ekle className="nav-link"veactiveStyle{{textDecoration:'underline'}}

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

Buraya bakın -> https://material-ui.com/guides/composition/#button .

Bu, resmi materyal kullanıcı arayüzü kılavuzudur. Belki benim için olduğu gibi senin için de faydalı olur.

Bununla birlikte, bazı durumlarda, alt çizgi devam eder ve bunun için text-decoration: "none" kullanmak isteyebilirsiniz. Daha temiz bir yaklaşım için, makeStyles'ı material-ui / core'dan içe aktarabilir ve kullanabilirsiniz.

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

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

const classes = useStyles();

Ve sonra JSX kodunuzda className özniteliğini {classes.menu-btn} olarak ayarlayın.

@ Grgur'un cevabını genişletmek için , denetçinize bakarsanız, Linkbileşenleri kullanmanın onlara önceden ayarlanmış renk değerini verdiğini göreceksiniz color: -webkit-link. textDecorationVarsayılan bir köprü gibi görünmesini istemiyorsanız, bunu geçersiz kılmanız gerekir .

style={{ backgroundImage: "none" }}

Sadece bu benim için çalıştı

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

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

Bazı durumlarda, Gatsby bileşeninin içinde başka bir bileşen kullanılırken , iç bileşenin etrafına <Link>bir divtane eklemek display: 'inline-block', altının çizilmesini önler (örnekte "Sayfa" nın).

Birisi material-ui's Link bileşenini arıyorsa . Sadece mülkü ekleyin underlineve yok olarak ayarlayın

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

Sizin gibi bir sorunu çözdüm. Firefox'taki elementi incelemeye çalıştım. Size bazı sonuçlar göstereceğim:

1. İncelediğim tek unsur bu. "Link" bileşeni "a" etiketine, "to" props ise "href" özelliğine dönüştürülecektir:

2. Ve işaretlediğimde: hov ve seçenek: fareyle üzerine gelin ve işte sonuç:

Gördüğünüz gibi: fareyle üzerine gelindiğinde text-decoration: underline var. Sadece css dosyama ekliyorum:

a:hover {
 text-decoration: none;
}

ve sorun çözüldü. Ama aynı zamanda metin dekorasyonunu da ayarladım: başka sınıflarda hiçbiri (sizin gibi: D), bu bazı etkiler yaratabilir (sanırım).

Benim için işe yarayan şey şudur:

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