如何摆脱 React Router 的 Link 组件的下划线？

javascript reactjs react-router

2022-08-30 00:39:20

我有以下几点：

如何去除蓝色下划线？代码如下：

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

答案 1

我看到您正在使用内联样式。用于儿童，实际上它应该在内部使用：textDecoration: 'none'<Link>

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

<Link>基本上将返回一个标准标记，这就是我们在那里应用规则的原因。<a>textDecoration

我希望这有帮助

答案 2

我认为在 MenuItem（以及其他 MaterialUI 组件（如按钮）中使用 react-router-dom Link 的最佳方法是在“组件”道具中传递 Link。

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

您需要在“MenuItem”的“to”属性中传递路由路径（该属性将向下传递到链接组件）。通过这种方式，您无需添加任何样式，因为它将使用 MenuItem 样式