리액트 라우터의 링크 컴포넌트 밑줄을 없애는 방법

리액트 라우터의 링크 컴포넌트 밑줄을 없애는 방법

다음과 같은 것이 있습니다.

파란색 밑줄을 어떻게 없애야 하죠?코드는 다음과 같습니다.

<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>tag, 이것이 우리가textDecoration거기서 지배한다.

도움이 됐으면 좋겠다

MenuItem(및 기타 재료)에서 react-router-dom 링크를 사용하는 가장 좋은 방법이라고 생각합니다.버튼 등 UI 컴포넌트)는 "컴포넌트" 프로펠러 내의 링크를 전달합니다.

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

"MenuItem"의 'to' 프로펠러에 있는 경로 경로를 통과해야 합니다(이 경로는 Link 구성 요소로 전달됩니다).이렇게 하면 MenuItem 스타일이 사용되므로 스타일을 추가할 필요가 없습니다.

사용하시는 경우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} />;

링크의 스타일을 적절히 삭제하는 다른 방법도 있습니다.스타일링 해야 돼요.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> 

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

찾는 사람이 있다면material-ui의 링크 컴포넌트속성만 추가합니다.underlinenone으로 설정합니다.

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

App.css(또는 상대편)에 있는 핵접근법이 있습니다.

a{
  text-decoration: none;
}

모든 사람에게 밑줄을 쳐주지 않는다.<a>이 문제의 근본 원인인 태그

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

꽤 간단합니다.이것만 추가해 주세요.style={{ textDecoration: 'none' }}내면에<Link>태그

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

밑줄은 디폴트로react-router-dom패키지.다음을 수행하여 문제를 해결할 수 있습니다.

<Link to="/route-path" style={{ textDecoration: 'none' }}> 
    // Rest of the code
</Link>

머티리얼 UI v5+

다음과 같이 MUI 구성 요소 스타일을 글로벌하게 사용자 정의할 수 있어야 합니다.

import { createTheme } from '@mui/material'

const theme = createTheme({
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          textDecoration: 'none',
        },
      },
    },
  },
})

const App = ({ currentAccount, neighborhoodsWithPropertyCount }) => (
  <ThemeProvider theme={theme}>
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  </ThemeProvider>
)

export default App

단, 실제로는 링크컴포넌트를 사용하는 경우가 대부분입니다.react-router-dom이 경우 링크에는 기본적으로 텍스트 장식이 없습니다.

내 밑에서 일하면서, 그냥 추가해.className="nav-link"그리고.activeStyle{{textDecoration:'underline'}}

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

여기를 봐 주세요.-> https://material-ui.com/guides/composition/ #

이것은 정식 자료 안내서입니다.나처럼 당신에게 유용할지도 몰라요.

그러나 경우에 따라 밑줄이 유지되며 텍스트 장식인 "없음"을 사용할 수 있습니다.material-ui/core에서 makeStyles를 Import하여 사용할 수 있습니다.

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

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

const classes = useStyles();

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

jsx:

<Link className="link">
  test
</Link>

css:

.link{
    text-decoration: none;
}

리액트용 CSS 솔루션

1. Link(React Router) 태그에만 className/class를 추가합니다.(가장 중요한 부분!!ClassName을 Link 태그에 추가합니다.
2. 텍스트 장식 추가: css 파일에 없음.

Nav.js

  <Link to="/" className="link" >
    Get Started
  </Link>

Nav.css

.link{
text-decoration: none;
}

@Grgur의 답변을 자세히 설명하자면 인스펙터를 보시면Link 요소는 미리 설정된 값을 합니다.color: -webkit-link이 명령어를 덮어쓸 필요가 있습니다.textDecoration기본 하이퍼링크처럼 보이지 않도록 하려면 를 누릅니다.

style={{ backgroundImage: "none" }}

난 이것만 먹혔어

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

1. 그것은 내가 검사하는 요소일 뿐이다."Link" 구성요소는 "a" 태그로 변환되고 "to" 소품은 "href" 속성으로 변환됩니다.

2. [ : hov ] option [ option : hover ]를 선택하면 다음과 같은 결과가 나타납니다.

보시는 바와 같이:hover에는 텍스트 장식이 있습니다: 밑줄이 있습니다.css 파일에만 추가합니다.

a:hover {
 text-decoration: none;
}

문제가 해결됩니다.그러나 텍스트 장식도 설정합니다.다른 클래스(예: D)에서는 효과가 있을 수 있습니다(내 생각에 없습니다).

<Link
   to='/maxpain'
   replace
   style={{
           textDecoration: 'none'
          }}
   >
     <LinkText>Click here!</LinkText>
</Link>

그렇게 간단해!

<Link />는 기본적으로 "tag"<a>시간에 를 붙이기 에 그냥 .

a { text-decoration: none; }

그리고 나에게도 효과가 있었다:) 행운을 빈다.

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

내부에서 다른 <Link> "" , ""divdisplay: 'inline-block'내부 구성 요소 주위에 밑줄이 표시되지 않도록 합니다(예제에서 '페이지').

이 코드 조각을 scs 파일에 간단히 사용할 수 있습니다.이렇게 하면 원치 않는 색상의 변화가 없어집니다.

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

---

링크 요소가 h4를 '밑줄'로 변경하고 텍스트 장식을 설정하는 데 문제가 있었습니다. "none"은 작동하지 않았습니다. 유일한 해결책은 버튼을 사용하는 것이었습니다.

<Link to="/settings">
    <button>Settings</button>
</Link>

표준 a-link와 react-link는 동일합니다.

a-link 스타일링을 할 경우 자동으로 react-link 스타일링됩니다.

a{원하는 스타일링}

그저.

<Link
   to={`$path`}
   style={{ borderBottom: "none" }}> 
    .... 
</Link>

이 질문을 찾았는데, 일반적인 경우(예를 들어 요소가 MenuItem이 아닌 경우)에는 실제로 문제를 해결할 수 있는 답이 하나도 없습니다.제안:

import {useHistory} from "react-router-dom";
const MyComp = () => {
  const history = useHistory();
  return <div>
    <AnyComponent onclick={()=>history.push('/path/u/want')}
  </div>
}

두 줄만 더 추가해서 저를 위해 일했어요:)

{
 text-decoration: none; 
 color: black;
}

 a {
  text-decoration: none !important;
  color: black !important; 
  font-size: 20px;
}

App.css에서 사용됨!중요

css 스타일 추가

a:link {
  text-decoration: none;
  color: #cc850a;
}

a:visited {
  text-decoration: none;
  color: #cc850a;
}

a:hover {
  text-decoration: none;
  color: #47a1ad;
}

a:active {
  text-decoration: none;
}

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