Ant Design：如何在悬停时禁用菜单项的边框底部？答案

【问题标题】：Ant Design: How can I disable border-bottom of a menu item on hover?Ant Design：如何在悬停时禁用菜单项的边框底部？
【发布时间】：2021-09-09 10:15:13
【问题描述】：

我想修改菜单项的默认样式（其中有一个搜索栏），我想删除通过将鼠标悬停在项目（搜索栏）上出现的边框底部属性

<Menu theme='light' className='nav-bar' mode='horizontal'>
      <Menu.Item disabled style={{ color: '#262626', fontSize: '1.5rem' }}>
        {/* <Title style={{color: '#40a9ff'}} level={4}>Dokan</Title> */}
        Dokan
      </Menu.Item>

      <Menu.Item className="modified-item">
        <Search
          placeholder='input search text'
          onSearch={(value) => console.log(value)}
        />
      </Menu.Item>

      <Menu.Item className>Change Theme</Menu.Item>

      <Menu.Item className>Home</Menu.Item>

      <Menu.Item className>Checkout</Menu.Item>
    </Menu>

我尝试过的是：

.modified-item:hover {
  border-bottom: none;
}

但是没有用。

【问题讨论】：

不是将类分配给菜单项，而是将其分配给搜索框。然后应用css。看看它是否有效
已申请但没有用。
试试!important。如果仍然没有工作，请检查开发工具为什么会出现

标签： javascript css reactjs redux antd

【解决方案1】：

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

【讨论】：

【解决方案2】：

border-bottom: none; 不是 CSS 中存在的样式选项。尝试 border-bottom-style: none; 或者 opacity: 0;

【讨论】：

【解决方案3】：

在 Menu.Item 中使用样式属性而不是使用 className

<Menu.Item style={{borderBottom:'none'}}>
    <Search
      placeholder='input search text'
      onSearch={(value) => console.log(value)}
    />
</Menu.Item>

【讨论】：

这不起作用

【解决方案4】：

.ant-menu-item:hover::after {
  border-bottom: none !important;
}

这会起作用

【讨论】：