[英]How to remove highlight from menu item hover in Ant Design?
How could I remove onHover
highlight from the antd menu item ?如何从antd 菜单项中删除onHover
突出显示?
I did the following:我做了以下事情:
<Header className="header">
<Menu mode="horizontal" style={{ lineHeight: "50px" }}>
<Menu.Item key="1">
<Title {...props} />
</Menu.Item>
<Menu.Item key="3">
<FrequentItems {...props} />
</Menu.Item>
<Menu.Item key="2" style={{ float: "right" }}>
<ProfileSettings {...props} />
</Menu.Item>
</Menu>
{/* <Content>
<Title {...props} />
</Content> */}
</Header>
The menu item appear as expected but it gives a underlined highlight when hovered over any menu item.菜单项按预期显示,但当鼠标悬停在任何菜单项上时,它会突出显示下划线。 How could I avoid this?我怎么能避免这种情况?
Currently on hover it looks like the following:目前处于悬停状态,如下所示:
On hover blue line appears.悬停时出现蓝线。 I want one of the menu item to be a static text.我希望菜单项之一是静态文本。 Not clickable and color should not change on hover.不可点击,悬停时颜色不应改变。
If you want just an item to be not-clickable, static text, with no on-hover style- just use the disabled
prop of Menu.Item :如果你只想要一个不可点击的静态文本,没有悬停样式- 只需使用Menu.Item的disabled
属性:
<Menu.Item disabled>
Disbaled
</Menu.Item>
If you want to override the on-hover styling of all items you need to declare styles and apply them to Menu.Item:如果要覆盖所有项目的悬停样式,则需要声明样式并将它们应用于 Menu.Item:
You css class:你的css类:
// ugly css hack
.modified-item:hover {
border-bottom: 2px solid transparent !important;
color: inherit !important;
}
And add that as className
prop:并将其添加为className
道具:
<Menu.Item className="modified-item">
Modified
</Menu.Item>
Here is a demo:这是一个演示:
Bear in mind, Ant design urges not to do this :请记住,Ant 设计敦促不要这样做:
You can override its style, but we don't recommend doing so.您可以覆盖其样式,但我们不建议这样做。 antd is not only a set of React components but also a design specification. antd 不仅是一组 React 组件,更是一个设计规范。
Here is the solution that works on antd v4:这是适用于 antd v4 的解决方案:
.ant-menu-horizontal, .ant-menu-item::after, .ant-menu-submenu::after {
border: none !important;
}
Hover creates pseudo element ::after
responsible for the line, so just hide it.悬停创建伪元素::after
负责该行,因此只需将其隐藏即可。
.ant-menu-root {
> li:nth-of-type(1) {
&::after {
display: none;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.