如何摆脱React路由器的链接组件的下划线?

我有以下几点:

如何去掉蓝色下划线? 代码如下:

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

MenuItem组件来自http://www.material-ui.com/#/components/menu

当前回答

我只是加了两行，就为我工作了:)

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

其他回答

我解决了一个像你这样的问题。我试着在firefox中检查元素。我将向你们展示一些结果:

这只是我检查过的元素。“Link”组件将被转换为“a”标签，“to”道具将被转换为“href”属性:

当我点击:hov和选项:hover，这里是结果:

如你所见:悬停有文字装饰:下划线。我只添加到我的css文件:

a:hover {
 text-decoration: none;
}

问题就解决了。但我也在一些其他类(比如你:D)设置了text-decoration: none，这可能会产生一些效果(我猜)。

对我有用的是:

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

Just

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

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

在App.css中使用

<Link 
   _hover={{
      textDecoration: "none"
   }}
   >
   Logo
</Link>

推荐文章