Làm cách nào để loại bỏ gạch chân cho thành phần Link của React Router?

Tôi có những thứ sau:

Làm cách nào để loại bỏ gạch chân màu xanh? Mã dưới đây:

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

Thành phần MenuItem là từ http://www.material-ui.com/#/components/menu

Bất kỳ cái nhìn sâu sắc hoặc hướng dẫn sẽ được đánh giá rất cao. Cảm ơn bạn trước.

Tôi thấy bạn đang sử dụng các kiểu nội tuyến. textDecoration: 'none'được sử dụng ở trẻ em, trong thực tế nó nên được sử dụng bên trong <Link>như vậy:

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

<Link>về cơ bản sẽ trả về một <a>thẻ chuẩn , đó là lý do tại sao chúng tôi áp dụng textDecorationquy tắc ở đó.

Tôi hy vọng điều đó sẽ giúp

Nếu bạn đang sử dụng styled-components, bạn có thể làm như sau:

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

Tôi nghĩ rằng cách tốt nhất để sử dụng Liên kết react-router-dom trong MenuItem (và thành phần MaterialUI khác chẳng hạn như các nút) là chuyển Liên kết trong phần hỗ trợ "thành phần"

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

bạn cần phải chuyển đường dẫn tuyến trong phần hỗ trợ 'đến' của "MenuItem" (sẽ được chuyển đến thành phần Liên kết). Bằng cách này, bạn không cần thêm bất kỳ kiểu nào vì nó sẽ sử dụng kiểu MenuItem

Cũng có một cách khác để loại bỏ đúng kiểu của liên kết. Bạn phải tạo kiểu cho nó textDecoration='inherit'và color='inherit'bạn có thể thêm những kiểu đó làm kiểu vào thẻ liên kết như:

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

hoặc để làm cho nó tổng quát hơn, chỉ cần tạo một lớp css như:

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

Và sau đó chỉ <Link className='text-link'>

Bạn có thể thêm thành phần style={{ textDecoration: 'none' }}của mình Linkđể xóa gạch dưới. Bạn cũng có thể thêm nhiều hơn cssvào stylekhối ví dụ 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>

Có cách tiếp cận hạt nhân trong App.css của bạn (hoặc đối tác)

a{
  text-decoration: none;
}

ngăn chặn gạch chân cho tất cả <a>các thẻ, đây là nguyên nhân gốc rễ của vấn đề này

Làm việc cho tôi, chỉ cần thêm className="nav-link"vàactiveStyle{{textDecoration:'underline'}}

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

Xem tại đây -> https://material-ui.com/guides/composition/#button .

Đây là hướng dẫn chính thức về vật liệu-ui. Có lẽ nó sẽ hữu ích cho bạn cũng như cho tôi.

Tuy nhiên, trong một số trường hợp, gạch chân vẫn tồn tại và bạn có thể muốn sử dụng trang trí văn bản: "none" cho điều đó. Để có cách tiếp cận rõ ràng hơn, bạn có thể nhập và sử dụng makeStyles từ material-ui / core.

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

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

const classes = useStyles();

Và sau đó đặt thuộc tính className thành {class.menu-btn} trong mã JSX của bạn.

Để mở rộng câu trả lời của @ Grgur , nếu bạn nhìn vào trình kiểm tra của mình, bạn sẽ thấy rằng việc sử dụng Linkcác thành phần mang lại cho chúng giá trị màu đặt trước color: -webkit-link. Bạn sẽ cần ghi đè điều này cùng với textDecorationnếu bạn không muốn nó trông giống như một siêu liên kết mặc định.

style={{ backgroundImage: "none" }}

Chỉ điều này làm việc cho tôi

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

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

Trong một số trường hợp khi sử dụng một thành phần khác bên trong thành phần Gatsby <Link>, việc thêm dấu divvới display: 'inline-block'xung quanh thành phần bên trong sẽ ngăn chặn việc gạch chân (của 'Trang' trong ví dụ).

Nếu ai đó đang tìm kiếm material-uithành phần Liên kết của. Chỉ cần thêm thuộc tính underlinevà đặt nó thành không có

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

Tôi đã giải quyết một vấn đề có thể giống như của bạn. Tôi đã cố gắng kiểm tra phần tử trong firefox. Tôi sẽ cho bạn thấy một số kết quả:

1. Nó chỉ là yếu tố tôi đã kiểm tra. Thành phần "Liên kết" sẽ được chuyển đổi thành thẻ "a" và đạo cụ "thành" sẽ được chuyển đổi thành thuộc tính "href":

2. Và khi tôi đánh dấu vào: hov và option: hover và đây là kết quả:

Như bạn thấy: di chuột có văn bản-trang trí: gạch chân. Tôi chỉ thêm vào tệp css của mình:

a:hover {
 text-decoration: none;
}

và vấn đề được giải quyết. Nhưng tôi cũng thiết lập trang trí văn bản: không có trong một số lớp khác (như bạn: D), điều đó có thể tạo ra một số hiệu ứng (tôi đoán).

Điều làm việc cho tôi là:

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