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

【问题标题】：How to remove highlight from menu item hover in Ant Design?如何从 Ant Design 中的菜单项悬停中删除突出显示？
【发布时间】：2019-02-07 11:44:19
【问题描述】：

如何从antd menu item 中删除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>

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

当前悬停时如下所示：

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

【问题讨论】：

标签： javascript reactjs menuitem antd

【解决方案1】：

如果您只希望一个项目是不可点击的静态文本，没有悬停样式 - 只需使用 disabled prop of Menu.Item：

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

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

这是一个演示：

记住，蚂蚁设计urges not to do this：

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

【讨论】：

.modified-item.ant-menu-submenu-active{ 边框底部：2px 实心透明！重要；颜色：继承！重要；我会修改 css 规则以避免下划线指示器重新出现在下拉菜单中。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

悬停会创建负责该行的伪元素::after，所以只需隐藏它。

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

【讨论】：