다음이 있습니다.
파란색 밑줄을 제거하려면 어떻게합니까? 코드는 다음과 같습니다.
<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>이 문제의 근본 원인 인 모든 태그의 밑줄을 방지합니다.
