Question

我想修改菜单项（在其中具有搜索栏）的默认样式，我要删除通过将鼠标悬停在菜单项（搜索栏）上而显示的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;
}

但是没有用。

Answer 1

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

Answer 2

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

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

蚂蚁设计：如何在悬停时禁用菜单项的边框底部？

2 个答案: