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 스타일을 사용하므로 스타일을 추가 할 필요가 없습니다.

링크의 스타일을 적절하게 제거하는 또 다른 방법이 있습니다. 당신은 그것의 스타일을 제공해야 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에 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>

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 가이드입니다. 나처럼 당신에게 유용 할 것입니다.

그러나 어떤 경우에는 밑줄이 계속 표시되며이를 위해 "없음"텍스트 장식을 사용할 수 있습니다. 보다 깔끔한 접근 방식을 위해 material-ui / core에서 makeStyles를 가져 와서 사용할 수 있습니다.

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

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

const classes = useStyles();

그런 다음 JSX 코드에서 className 속성을 {classes.menu-btn}으로 설정합니다.

@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>구성 요소 내부에서 다른 구성 요소를 사용할 때 내부 구성 요소 주위 에 divwith display: 'inline-block'를 추가 하면 밑줄이 표시되지 않습니다 (예제에서 'Page').

누군가 material-ui의 링크 구성 요소를 찾고 있다면 . 속성을 추가하고 underline없음으로 설정하기 만하면 됩니다.

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

나는 당신과 같은 문제를 해결했습니다. 나는 파이어 폭스에서 요소를 검사하려고했습니다. 몇 가지 결과를 보여 드리겠습니다.

1. 내가 검사 한 요소 일뿐입니다. "Link"구성 요소는 "a"태그로 변환되고 "to"props는 "href"속성으로 변환됩니다.

2. 그리고 내가 : hov 및 옵션을 선택하면 : hover 그리고 여기에 결과가 있습니다.

a : hover에는 text-decoration : underline이 있습니다. 내 CSS 파일에만 추가합니다.

a:hover {
 text-decoration: none;
}

문제가 해결되었습니다. 그러나 나는 또한 text-decoration을 설정했습니다 : 어떤 다른 클래스 (당신과 같은 : D)에는 없음, 그것은 약간의 효과를 만들 수 있습니다 (나는 추측합니다).

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

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