如何删除菜单项悬停亮点蚂蚁设计？

Question

我怎么会从onHover删除antd menu item亮点？

我做了以下内容：

<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不仅是一套反应的组分，但也有设计规范。