如何摆脱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中使用

其他回答

对我有用的是:

<Link to="/" style={{boxShadow: "none"}}>

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

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

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

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

在App.css中使用

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

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

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

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

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

推荐文章