我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
当前回答
现在是2023年,伪类得到了广泛的支持。因为菜单项呈现为<li>,我们可以这样定义一个css规则:
a:has(> li) {
text-decoration: unset;
color: unset;
}
这只修改具有<li>子元素的<a>元素。
其他回答
如果有人正在寻找material-ui的链接组件。只需添加属性下划线并将其设置为none
<链接下划线= "没有" >…< /链接>
为我工作,只需添加className="nav-link"和activeStyle{{textDecoration:'下划线'}}
<NavLink className="nav-link" to="/" exact activeStyle=
{{textDecoration:'underline'}}>My Record</NavLink>
我解决了一个像你这样的问题。我试着在firefox中检查元素。 我将向你们展示一些结果:
这只是我检查过的元素。“Link”组件将被转换为“a”标签,“to”道具将被转换为“href”属性:
当我点击:hov和选项:hover,这里是结果:
如你所见:悬停有文字装饰:下划线。我只添加到我的css文件:
a:hover {
text-decoration: none;
}
问题就解决了。但我也在一些其他类(比如你:D)设置了text-decoration: none,这可能会产生一些效果(我猜)。
添加css样式
a:link {
text-decoration: none;
color: #cc850a;
}
a:visited {
text-decoration: none;
color: #cc850a;
}
a:hover {
text-decoration: none;
color: #47a1ad;
}
a:active {
text-decoration: none;
}
<Link
_hover={{
textDecoration: "none"
}}
>
Logo
</Link>