我有以下几点:
如何去掉蓝色下划线? 代码如下:
<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
当前回答
对我有用的是:
<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')。
我解决了一个像你这样的问题。我试着在firefox中检查元素。 我将向你们展示一些结果:
这只是我检查过的元素。“Link”组件将被转换为“a”标签,“to”道具将被转换为“href”属性:
当我点击:hov和选项:hover,这里是结果:
如你所见:悬停有文字装饰:下划线。我只添加到我的css文件:
a:hover {
text-decoration: none;
}
问题就解决了。但我也在一些其他类(比如你:D)设置了text-decoration: none,这可能会产生一些效果(我猜)。
看这里-> https://material-ui.com/guides/composition/#button。
这是官方的材质界面指南。也许它对你会像对我一样有用。
然而,在某些情况下,下划线仍然存在,您可能需要使用text-decoration: "none"。为了更简洁的方法,您可以从material-ui/core导入并使用makestyle。
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles(() => ({
menu-btn: {
textDecoration: 'none',
},
}));
const classes = useStyles();
然后将className属性设置为{classes。menu-btn}在JSX代码中。
a {
text-decoration: none !important;
color: black !important;
font-size: 20px;
}
在App.css中使用
现在是2023年,伪类得到了广泛的支持。因为菜单项呈现为<li>,我们可以这样定义一个css规则:
a:has(> li) {
text-decoration: unset;
color: unset;
}
这只修改具有<li>子元素的<a>元素。