我有以下几点:
如何去掉蓝色下划线? 代码如下:
<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
当前回答
我认为在菜单项(和其他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样式
其他回答
我看到你在使用内联样式。textDecoration: 'none'在child中使用,实际上它应该在<Link>中使用,如下所示:
<Link to="first" style={{ textDecoration: 'none' }}>
<MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>
<Link>将返回一个标准的<a>标签,这就是为什么我们在这里应用textDecoration规则的原因。
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;
}
现在是2023年,伪类得到了广泛的支持。因为菜单项呈现为<li>,我们可以这样定义一个css规则:
a:has(> li) {
text-decoration: unset;
color: unset;
}
这只修改具有<li>子元素的<a>元素。
如果你正在使用样式化组件,你可以这样做:
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} />;
a {
text-decoration: none !important;
color: black !important;
font-size: 20px;
}
在App.css中使用