我要修改功能表项目(内含搜寻列)的预设样式,我要移除将游标停留在项目(搜寻列)上时所显示的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;
}
但没有成功。
5条答案
按热度按时间23c0lvtd1#
j8ag8udp2#
border-bottom: none;
不是css中存在的样式选项。请尝试border-bottom-style: none;
或opacity: 0;
6ovsh4lw3#
在Menu.Item中不使用className,而使用style属性
fumotvh34#
这样就行了
iyzzxitl5#
将样式添加到菜单标记,如下所示