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

我有以下几点:

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

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

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

当前回答

jsx:

<Link className="link">
  test
</Link>

css:

.link{
    text-decoration: none;
}

其他回答

Just

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

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

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

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

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

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

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

a { text-decoration: none; }

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

推荐文章