จะกำจัดขีดเส้นใต้สำหรับส่วนประกอบ Link ของ React Router ได้อย่างไร

ฉันมีสิ่งต่อไปนี้:

ฉันจะกำจัดขีดเส้นใต้สีน้ำเงินได้อย่างไร รหัสอยู่ด้านล่าง:

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

ส่วนประกอบ MenuItem มาจากhttp://www.material-ui.com/#/components/menu

ข้อมูลเชิงลึกหรือคำแนะนำใด ๆ จะได้รับการชื่นชมอย่างมาก ขอบคุณล่วงหน้า.

ฉันเห็นว่าคุณใช้สไตล์อินไลน์ textDecoration: 'none'ใช้ในเด็กซึ่งในความเป็นจริงควรใช้ภายใน<Link>เช่น:

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

<Link>โดยพื้นฐานแล้วจะส่งคืน<a>แท็กมาตรฐานซึ่งเป็นเหตุผลที่เราใช้textDecorationกฎที่นั่น

ฉันหวังว่าจะช่วยได้

หากคุณใช้styled-componentsคุณสามารถทำสิ่งนี้ได้:

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

ฉันคิดว่าวิธีที่ดีที่สุดในการใช้ react-router-dom Link ใน MenuItem (และส่วนประกอบ MaterialUI อื่น ๆ เช่นปุ่ม) คือการส่งลิงก์ในส่วน "component"

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

คุณต้องผ่านเส้นทางเส้นทางในส่วน 'ถึง' ของ "MenuItem" (ซึ่งจะถูกส่งต่อไปยังส่วนประกอบลิงก์) ด้วยวิธีนี้คุณไม่จำเป็นต้องเพิ่มสไตล์ใด ๆ เนื่องจากจะใช้สไตล์ MenuItem

นอกจากนี้ยังมีอีกวิธีหนึ่งในการลบรูปแบบของลิงก์อย่างถูกต้อง คุณต้องกำหนดรูปแบบtextDecoration='inherit'และcolor='inherit'คุณสามารถเพิ่มสิ่งเหล่านั้นเป็นสไตล์ให้กับแท็กลิงก์เช่น:

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

หรือเพื่อให้กว้างขึ้นเพียงแค่สร้างคลาส css เช่น:

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

แล้วก็แค่ <Link className='text-link'>

คุณสามารถเพิ่มstyle={{ textDecoration: 'none' }}ในLinkองค์ประกอบของคุณเพื่อลบขีดเส้นใต้ นอกจากนี้คุณยังสามารถเพิ่มมากขึ้นcssในเช่นบล็อกstylestyle={{ 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 ของคุณ (หรือคู่กัน)

a{
  text-decoration: none;
}

ซึ่งป้องกันการขีดเส้นใต้สำหรับ<a>แท็กทั้งหมดซึ่งเป็นสาเหตุของปัญหานี้

ทำงานให้ฉันเพียงแค่เพิ่มclassName="nav-link"และactiveStyle{{textDecoration:'underline'}}

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

ดูที่นี่ -> https://material-ui.com/guides/composition/#button

นี่คือคู่มือวัสดุ - UI อย่างเป็นทางการ บางทีมันอาจจะมีประโยชน์กับคุณเหมือนเดิมสำหรับฉัน

อย่างไรก็ตามในบางกรณีการขีดเส้นใต้จะยังคงอยู่และคุณอาจต้องการใช้การตกแต่งข้อความ: "ไม่มี" สำหรับสิ่งนั้น สำหรับแนวทางที่สะอาดยิ่งขึ้นคุณสามารถนำเข้าและใช้ makeStyles จาก material-ui / core

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

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

const classes = useStyles();

จากนั้นตั้งค่าแอตทริบิวต์ className เป็น {class.menu-btn} ในโค้ด JSX ของคุณ

เพื่อขยาย@ คำตอบของ Grgurถ้าคุณมองในการตรวจสอบของคุณคุณจะพบว่าการใช้ส่วนประกอบที่ช่วยให้พวกเขามีค่าสีที่กำหนดไว้ล่วงหน้าLink color: -webkit-linkคุณจะต้องลบล้างสิ่งนี้พร้อมกับtextDecorationถ้าคุณไม่ต้องการให้ดูเหมือนไฮเปอร์ลิงก์เริ่มต้น

style={{ backgroundImage: "none" }}

แค่นี้ก็ใช้ได้ผลสำหรับฉัน

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

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

ในบางกรณีเมื่อใช้ส่วนประกอบอื่นภายในคอมโพเนนต์ Gatsby <Link>การเพิ่มdivด้วยdisplay: 'inline-block'รอบ ๆ ส่วนประกอบด้านในจะป้องกันการขีดเส้นใต้ (ของ 'หน้า' ในตัวอย่าง)

หากมีคนกำลังมองหาmaterial-uiส่วนประกอบของลิงค์ เพียงแค่เพิ่มคุณสมบัติunderlineและตั้งค่าเป็นไม่มี

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

ฉันได้แก้ไขปัญหาที่อาจเหมือนกับของคุณ ฉันพยายามตรวจสอบองค์ประกอบใน firefox ฉันจะแสดงผลลัพธ์บางอย่างให้คุณ:

1. มันเป็นเพียงองค์ประกอบที่ฉันตรวจสอบ คอมโพเนนต์ "ลิงก์" จะถูกแปลงเป็นแท็ก "a" และอุปกรณ์ประกอบฉาก "เป็น" จะถูกแปลงเป็นคุณสมบัติ "href":

2. และเมื่อฉันทำเครื่องหมายใน: hov และ option: hover และนี่คือผลลัพธ์:

ดังที่คุณเห็น a: hover มี text-decoration: underline ฉันเพิ่มลงในไฟล์ css ของฉันเท่านั้น:

a:hover {
 text-decoration: none;
}

และปัญหาได้รับการแก้ไข แต่ฉันยังตั้งค่าการตกแต่งข้อความ: ไม่มีในคลาสอื่น (เช่นคุณ: D) นั่นอาจจะสร้างเอฟเฟกต์บางอย่าง (ฉันเดา)

สิ่งที่ใช้ได้ผลสำหรับฉันคือ:

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