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

我有以下几点:

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

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

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

当前回答

CSS解决方案也用于React

只在Link(React Router)标签中添加className/class。(最重要的部分!!在链接标签中添加ClassName，而不是其他标签。) 在css文件中添加text-decoration: none。

Nav.js

  <Link to="/" className="link" >
    Get Started
  </Link>

Nav.css

.link{
text-decoration: none;
}

其他回答

对我有用的是:

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

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

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

你可以在Link组件中添加style={{textDecoration: 'none'}}来删除下划线。你也可以在样式块中添加更多的css，例如style={{textDecoration: 'none'， color: 'white'}}。

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1>

核心方法在app。css(或对应版本)中

a{
  text-decoration: none;
}

这防止下划线为所有<a>标签，这是这个问题的根本原因

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

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

推荐文章