如何摆脱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'}}

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

其他回答

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

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

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

我认为在菜单项(和其他MaterialUI组件，如按钮)中使用react-router-dom链接的最好方法是在“组件”道具中传递链接

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

你需要在“MenuItem”的“to”道具中传递路由路径(它将被传递给Link组件)。这样你就不需要添加任何样式，因为它将使用MenuItem样式

<Link to="/page">
    <Box sx={{ display: 'inline-block' }}>
        <PLink variant="primary">Page</PLink>
    </Box>
</Link>

在某些情况下，当在Gatsby <Link>组件中使用另一个组件时，在内部组件周围添加带有display: 'inline-block'的div，可以防止下划线(在示例中为'Page')。

标准的a-link和react-link是一样的。

如果你要样式化a-link，它会自动样式化react-link。

一个{ 你想要什么造型｝

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

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

推荐文章