Bagaimana cara menghilangkan garis bawah untuk komponen Link dari React Router?

Saya memiliki yang berikut ini:

Bagaimana cara menghilangkan garis bawah biru? Kode di bawah ini:

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

Komponen MenuItem berasal dari http://www.material-ui.com/#/components/menu

Wawasan atau panduan apa pun akan sangat dihargai. Terima kasih sebelumnya.

Saya melihat Anda menggunakan gaya sebaris. textDecoration: 'none'digunakan pada anak-anak, yang sebenarnya harus digunakan di dalam <Link>seperti:

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

<Link>pada dasarnya akan mengembalikan <a>tag standar , itulah sebabnya kami menerapkan textDecorationaturan di sana.

saya harap itu membantu

Jika Anda menggunakan styled-components, Anda dapat melakukan sesuatu seperti ini:

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

Saya pikir cara terbaik untuk menggunakan react-router-dom Link di MenuItem (dan komponen MaterialUI lainnya seperti tombol) adalah dengan meneruskan Link di prop "komponen"

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

Anda harus melewati jalur rute di prop 'ke' dari "MenuItem" (yang akan diteruskan ke komponen Tautan). Dengan cara ini Anda tidak perlu menambahkan gaya apa pun karena akan menggunakan gaya MenuItem

Ada juga cara lain untuk menghapus gaya tautan dengan benar. Anda harus memberikan gaya textDecoration='inherit'dan color='inherit'Anda dapat menambahkannya sebagai gaya ke tag tautan seperti:

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

atau untuk membuatnya lebih umum buat saja kelas css seperti:

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

Dan kemudian baru saja <Link className='text-link'>

Anda dapat menambahkan komponen style={{ textDecoration: 'none' }}Anda Linkuntuk menghapus garis bawah. Anda juga dapat menambahkan lebih banyak cssdi styleblok misalnya 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>

Ada pendekatan nuklir yang ada di App.css Anda (atau mitra)

a{
  text-decoration: none;
}

yang mencegah garis bawah untuk semua <a>tag yang merupakan akar penyebab masalah ini

Bekerja untuk saya, tambahkan saja className="nav-link"danactiveStyle{{textDecoration:'underline'}}

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

Lihat di sini -> https://material-ui.com/guides/composition/#button .

Ini adalah panduan materi-ui resmi. Mungkin itu akan berguna bagi Anda seperti bagi saya.

Namun, dalam beberapa kasus, garis bawah tetap ada dan Anda mungkin ingin menggunakan hiasan teks: "tidak ada" untuk itu. Untuk pendekatan yang lebih bersih, Anda dapat mengimpor dan menggunakan makeStyles dari material-ui / core.

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

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

const classes = useStyles();

Dan kemudian setel atribut className ke {class.menu-btn} di kode JSX Anda.

Untuk memperluas jawaban @ Grgur , jika Anda melihat inspektur Anda, Anda akan menemukan bahwa menggunakan Linkkomponen memberi mereka nilai warna yang telah ditetapkan color: -webkit-link. Anda harus menimpa ini bersama dengan textDecorationjika Anda tidak ingin terlihat seperti hyperlink default.

style={{ backgroundImage: "none" }}

Hanya ini yang berhasil untuk saya

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

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

Dalam beberapa kasus saat menggunakan komponen lain di dalam <Link>komponen Gatsby , menambahkan divdengan di display: 'inline-block'sekitar komponen dalam, mencegah garis bawah (dari 'Halaman' dalam contoh).

Jika seseorang mencari material-uikomponen Link. Cukup tambahkan properti underlinedan setel ke tidak ada

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

Saya telah menyelesaikan masalah mungkin seperti Anda. Saya mencoba memeriksa elemen di firefox. Saya akan menunjukkan beberapa hasil:

1. Itu hanya elemen yang telah saya periksa. Komponen "Link" akan diubah menjadi tag "a", dan properti "ke" akan diubah menjadi properti "href":

2. Dan ketika saya mencentang: hov dan opsi: hover dan inilah hasilnya:

Seperti yang Anda lihat: hover memiliki text-decoration: underline. Saya hanya menambahkan ke file css saya:

a:hover {
 text-decoration: none;
}

dan masalah teratasi. Tapi saya juga mengatur dekorasi teks: tidak ada di beberapa kelas lain (seperti Anda: D), yang mungkin membuat beberapa efek (saya kira).

Apa yang berhasil bagi saya adalah ini:

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