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

我有以下几点:

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

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

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

当前回答

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

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

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

其他回答

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

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

为我工作，只需添加className="nav-link"和activeStyle{{textDecoration:'下划线'}}

<NavLink className="nav-link" to="/" exact activeStyle= 
  {{textDecoration:'underline'}}>My Record</NavLink>

我有一个问题，链接元素将我的h4更改为“下划线”，设置文本装饰:“none”不起作用，我唯一的解决方案是使用按钮。

<Link to="/settings">
    <button>Settings</button>
</Link>

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

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

下划线默认来自react-router-dom包。您可以执行以下操作来修复此问题。

<Link to="/route-path" style={{ textDecoration: 'none' }}> 
    // Rest of the code
</Link>

推荐文章