如何从 Ant Design 中的菜单项悬停中删除突出显示？

Question

如何从antd 菜单项中删除onHover突出显示？

我做了以下事情：

<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>

菜单项按预期显示，但当鼠标悬停在任何菜单项上时，它会突出显示下划线。 我怎么能避免这种情况？

目前处于悬停状态，如下所示：

悬停时出现蓝线。 我希望菜单项之一是静态文本。 不可点击，悬停时颜色不应改变。

Answer 1

如果你只想要一个不可点击的静态文本，没有悬停样式- 只需使用Menu.Item的disabled属性：

<Menu.Item disabled>
    Disbaled
</Menu.Item>

如果要覆盖所有项目的悬停样式，则需要声明样式并将它们应用于 Menu.Item：

你的css类：

// ugly css hack
.modified-item:hover {
  border-bottom: 2px solid transparent !important;
  color: inherit !important;
}

并将其添加为className道具：

<Menu.Item className="modified-item">
    Modified
</Menu.Item>

这是一个演示：

请记住，Ant 设计敦促不要这样做：

您可以覆盖其样式，但我们不建议这样做。 antd 不仅是一组 React 组件，更是一个设计规范。

Answer 2

这是适用于 antd v4 的解决方案：

.ant-menu-horizontal, .ant-menu-item::after, .ant-menu-submenu::after {
    border: none !important;
}

Answer 3

悬停创建伪元素::after负责该行，因此只需将其隐藏即可。

.ant-menu-root {
    > li:nth-of-type(1) {
        &::after {
            display: none;
        }
    }
}