我有以下几点:
如何去掉蓝色下划线? 代码如下:
<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>元素。
其他回答
你可以在Link组件中添加style={{textDecoration: 'none'}}来删除下划线。你也可以在样式块中添加更多的css,例如style={{textDecoration: 'none', color: 'white'}}。
<h1>
<Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
Get Started
</Link>
</h1>
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;
}
如果你正在使用样式化组件,你可以这样做:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
const StyledLink = styled(Link)`
text-decoration: none;
&:focus, &:hover, &:visited, &:link, &:active {
text-decoration: none;
}
`;
export default (props) => <StyledLink {...props} />;
我发现这个问题,在一般情况下,没有一个答案真正解决了这个问题(例如,如果元素不是一个菜单项)。我建议:
import {useHistory} from "react-router-dom";
const MyComp = () => {
const history = useHistory();
return <div>
<AnyComponent onclick={()=>history.push('/path/u/want')}
</div>
}
为了扩展@Grgur的答案,如果你在检查器中查看,你会发现使用Link组件会给它们预设的颜色值color: -webkit-link。如果你不想让它看起来像一个默认的超链接,你需要覆盖这个textDecoration。