如何摆脱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'}}来删除下划线。你也可以在样式块中添加更多的css，例如style={{textDecoration: 'none'， color: 'white'}}。

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1>

其他回答

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

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

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

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

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

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

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

现在是2023年，伪类得到了广泛的支持。因为菜单项呈现为<li>，我们可以这样定义一个css规则:

a:has(> li) {
  text-decoration: unset;
  color: unset;
}

这只修改具有<li>子元素的<a>元素。

推荐文章