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

Question

如何从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>

菜单项将按预期显示，但是将鼠标悬停在任何菜单项上时，都会显示带下划线的突出显示。我如何避免这种情况？

当前在悬停时看起来如下：

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

Answer 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属性：

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

这是一个演示：

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

  

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

Answer 2

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

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

Answer 3

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

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