Javascript 如何摆脱 React Router 的 Link 组件的下划线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37669391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get rid of underline for Link component of React Router?
提问by Jo Ko
I have the following:
我有以下几点：
How do I get rid of the blue underline? The code is below:
如何去掉蓝色下划线？代码如下：
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
The MenuItem component is from http://www.material-ui.com/#/components/menu
MenuItem 组件来自http://www.material-ui.com/#/components/menu
Any insight or guidance would be greatly appreciated. Thank you in advance.
任何见解或指导将不胜感激。先感谢您。
回答by Grgur
I see you're using inline styles. textDecoration: 'none'is used in child, where in fact it should be used inside <Link>as such:
我看到您正在使用内联样式。textDecoration: 'none'在 child 中使用，实际上它应该在 inside<Link>中使用：
<Link to="first" style={{ textDecoration: 'none' }}>
<MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>
<Link>will essentially return a standard <a>tag, which is why we apply textDecorationrule there.
<Link>基本上会返回一个标准<a>标签，这就是我们textDecoration在那里应用规则的原因。
I hope that helps
我希望有帮助
回答by JoeTidee
If you are using styled-components, you could do something like this:
如果您正在使用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} />;
回答by Daniele Urania
I think the best way to use react-router-dom Link in a MenuItem (and other MaterialUI component such as buttons) is to pass the Link in the "component" prop
我认为在 MenuItem（以及其他 MaterialUI 组件，例如按钮）中使用 react-router-dom Link 的最佳方法是在“组件”道具中传递 Link
<Menu>
<MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
<MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>
you need to pass the route path in the 'to' prop of the "MenuItem" (which will be passed down to the Link component). In this way you don't need to add any style as it will use the MenuItem style
您需要在“MenuItem”的“to”道具中传递路由路径（它将向下传递到链接组件）。通过这种方式，您不需要添加任何样式，因为它将使用 MenuItem 样式
回答by Panos
There's also another way to properly remove the styling of the link. You have to give it style of textDecoration='inherit'and color='inherit'you can either add those as styling to the link tag like:
还有另一种方法可以正确删除链接的样式。你必须给它的风格textDecoration='inherit'和color='inherit'您可以添加为造型像的链接标签：
<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>
or to make it more general just create a css class like:
或者为了使它更通用，只需创建一个 css 类，如：
.text-link {
color: inherit;
text-decoration: inherit;
}
And then just <Link className='text-link'>
然后只是 <Link className='text-link'>
回答by Shubham Verma
You can add style={{ textDecoration: 'none' }}in your Linkcomponent to remove the underline. You can also add more cssin the styleblock e.g. style={{ textDecoration: 'none', color: 'white' }}.
您可以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>
回答by Kushal Atreya
//CSS
//CSS
.navigation_bar > ul > li {
list-style: none;
display: inline;
margin: 2%;
}
.link {
text-decoration: none;
}
//JSX
//JSX
<div className="navigation_bar">
<ul key="nav">
<li>
<Link className="link" to="/">
Home
</Link>
</li>
</ul>
</div>
回答by Dave Pile
There is the nuclear approach which is in your App.css (or counterpart)
在您的 App.css（或对应物）中有核方法
a{
text-decoration: none;
}
which prevents underline for all <a>tags which is the root cause of this problem
这可以防止所有<a>标签的下划线，这是此问题的根本原因
回答by vuvo
Working for me, just add className="nav-link"and activeStyle{{textDecoration:'underline'}}
为我工作，只需添加className="nav-link"和activeStyle{{textDecoration:'underline'}}
<NavLink className="nav-link" to="/" exact activeStyle=
{{textDecoration:'underline'}}>My Record</NavLink>
回答by tudorprodan
style={{ backgroundImage: "none" }}
Only this worked for me
只有这对我有用
回答by AlleyOOP
To expand on @Grgur's answer, if you look in your inspector, you'll find that using Linkcomponents gives them the preset color value color: -webkit-link. You'll need to override this along with the textDecorationif you don't want it to look like a default hyperlink.
为了扩展@Grgur 的答案，如果您查看检查器，您会发现使用Link组件会为它们提供预设颜色值color: -webkit-link。textDecoration如果您不希望它看起来像默认超链接，则需要将其与 一起覆盖。
