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

我有以下几点:

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

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

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

当前回答

<Link />标签在呈现时基本上是<a>标签，所以你可以只写

a { text-decoration: none; }

这对我来说很有效:) 祝你好运

其他回答

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

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

如果有人正在寻找material-ui的链接组件。只需添加属性下划线并将其设置为none

<链接下划线= "没有" >…< /链接>

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

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

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

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

a:hover {
 text-decoration: none;
}

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

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

就这么简单!

我看到你在使用内联样式。textDecoration: 'none'在child中使用，实际上它应该在<Link>中使用，如下所示:

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

<Link>将返回一个标准的<a>标签，这就是为什么我们在这里应用textDecoration规则的原因。

推荐文章