我有以下几点:
如何去掉蓝色下划线? 代码如下:
<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样式
其他回答
你可以在Link组件中添加style={{textDecoration: 'none'}}来删除下划线。你也可以在样式块中添加更多的css,例如style={{textDecoration: 'none', color: 'white'}}。
<h1>
<Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
Get Started
</Link>
</h1>
标准的a-link和react-link是一样的。
如果你要样式化a-link,它会自动样式化react-link。
一个{ 你想要什么造型 }
我解决了一个像你这样的问题。我试着在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;
}
下划线默认来自react-router-dom包。您可以执行以下操作来修复此问题。
<Link to="/route-path" style={{ textDecoration: 'none' }}>
// Rest of the code
</Link>