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

我有以下几点:

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

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

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

当前回答

这很简单。只需在<Link>标签内添加style={{textDecoration: 'none'}}

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

其他回答

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

我有一个问题，链接元素将我的h4更改为“下划线”，设置文本装饰:“none”不起作用，我唯一的解决方案是使用按钮。

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

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

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

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

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

a:hover {
 text-decoration: none;
}

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

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

CSS解决方案也用于React

只在Link(React Router)标签中添加className/class。(最重要的部分!!在链接标签中添加ClassName，而不是其他标签。) 在css文件中添加text-decoration: none。

Nav.js

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

Nav.css

.link{
text-decoration: none;
}

推荐文章