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

我有以下几点:

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

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

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

当前回答

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

其他回答

style={{ backgroundImage: "none" }}

只有这对我有用

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

<Link
   to='/maxpain'
   replace
   style={{
           textDecoration: 'none'
          }}
   >
     <LinkText>Click here!</LinkText>
</Link>

就这么简单!

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

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

为了扩展@Grgur的答案，如果你在检查器中查看，你会发现使用Link组件会给它们预设的颜色值color: -webkit-link。如果你不想让它看起来像一个默认的超链接，你需要覆盖这个textDecoration。

推荐文章