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

wh6knrhe 于 2022-11-12 发布在 Ant Design

关注(0)|答案(5)|浏览(251)

我要修改功能表项目（内含搜寻列）的预设样式，我要移除将游标停留在项目（搜寻列）上时所显示的border-bottom属性

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

但没有成功。

redux

来源：https://stackoverflow.com/questions/63032276/ant-design-how-can-i-disable-border-bottom-of-a-menu-item-on-hover

5条答案

按热度按时间

23c0lvtd1#

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

赞(0）回复(0）举报 2022-11-12

j8ag8udp2#

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

赞(0）回复(0）举报 2022-11-12

6ovsh4lw3#

在Menu.Item中不使用className，而使用style属性

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

赞(0）回复(0）举报 2022-11-12

fumotvh34#

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

这样就行了

赞(0）回复(0）举报 2022-11-12

iyzzxitl5#

将样式添加到菜单标记，如下所示

<Menu
        onClick={this.handleClick}
        selectedKeys={[current]}
        mode="horizontal"
        className="pb-3 pl-3 pt-3"
        style={{borderBottom: "none", lineHeight:"0px"}}
      >

赞(0）回复(0）举报 2022-11-12

我来回答

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

5条答案

相关问题

热门标签

最新问答