React Router의 Link 컴포넌트 밑줄을 제거하는 방법은 무엇입니까?

React Router의 Link 컴포넌트 밑줄을 제거하는 방법은 무엇입니까?

---

다음이 있습니다.

파란색 밑줄을 제거하려면 어떻게합니까? 코드는 다음과 같습니다.

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

---

MenuItem (및 버튼과 같은 다른 MaterialUI 구성 요소)에서 react-router-dom 링크를 사용하는 가장 좋은 방법은 "구성 요소"소품에 링크를 전달하는 것입니다.

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

"MenuItem"의 'to'prop에 경로 경로를 전달해야합니다 (링크 구성 요소로 전달됨). 이렇게하면 MenuItem 스타일을 사용하므로 스타일을 추가 할 필요가 없습니다.

---

당신은 추가 할 수 있습니다 style={{ textDecoration: 'none' }}당신에 Link밑줄을 제거하는 구성 요소입니다. 당신은 또한 더 추가 할 수 있습니다 css에 style블록 예 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>

---

링크의 스타일을 적절하게 제거하는 또 다른 방법이 있습니다. 당신은 그것의 스타일을 제공해야 textDecoration='inherit'하고 color='inherit'당신도 같은 링크 태그에 스타일링으로 사람들을 추가 할 수 있습니다 :

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

또는 더 일반적으로 만들려면 다음과 같은 CSS 클래스를 만드십시오.

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

그리고 그냥 <Link className='text-link'>

---

App.css (또는 대응)에 핵 접근 방식이 있습니다.

a{
  text-decoration: none;
}

<a>이 문제의 근본 원인 인 모든 태그의 밑줄을 방지합니다.

---

@Grgur의 답변 을 확장하려면 검사기를 살펴보면 Link구성 요소 를 사용 하면 미리 설정된 색상 값이 제공 된다는 것을 알 수 color: -webkit-link있습니다. textDecoration기본 하이퍼 링크처럼 보이지 않게하려면 과 함께이를 재정의해야합니다 .

---

나를 위해 일하고, 추가 className="nav-link"하고activeStyle{{textDecoration:'underline'}}

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

---

나를 위해 일한 것은 다음과 같습니다.

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

참고 URL : https://stackoverflow.com/questions/37669391/how-to-get-rid-of-underline-for-link-component-of-react-router