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

我有以下几点:

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

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

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

当前回答

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

在App.css中使用

其他回答

Just

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

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

a { text-decoration: none; }

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

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

还有另一种方法可以正确地删除链接的样式。你必须给它的textDecoration='inherit'和color='inherit'的风格，你可以添加这些作为样式的链接标签，如:

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

或者为了使它更通用，只需创建一个CSS类:

.text-link {
    color: inherit;
    text-decoration: inherit;
}

然后只需<Link className='text-link'>

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

在App.css中使用

推荐文章