Ant Design React(3.x) Menu导航菜单

解决UI样式问题:自定义antd Menu的Tooltip颜色
在后台项目开发中遇到一个UI需求,需要修改antd库中SiderBar菜单收缩时Tooltip的颜色。由于默认样式定位困难,经过查阅文档和源码发现每个菜单项被封装为独立的div置于最外层。通过重构样式,最终成功实现了指定颜色的Tooltip,同时确保样式不会影响其他页面。关键在于找到正确的位置并添加适当的类名,确保样式只在目标元素上生效。

1.最近在写后台项目得时候,UI设计了一版siderBar得样式,其中菜单栏收缩得时候,鼠标悬浮,会有tooltip得悬浮,要求是给他改成指定得颜色,修改得时候发现,定位不到样式再哪里,然后去官网看了下文档,结果也没找到对应得说明和属性(也可能是我自己没有找到),最后再看了menu代码,发现里面有把每一个小菜单,都生成了一个div, 放再了页面最外层,之后通过重构样式,实现了想要得效果。下面是类名

 

只有一级菜单得情况下使用得是tooltip,这样可以处理里面得样式,记得加最外层得类,不然可能会覆盖其他页面使用得tooltip得样式。

这个地方就是处理得有子集菜单得盒子了,基本算是比较简单得样式,找到地方后,样式处理起来就简单。处理的是这里的样式

注意:这个样式记得,写再最外层,不然就不会生效了,这个外层我也写menu自带得类,所以也不用担心会覆盖其他的样式。

提供的引用内容中未提及Ant Design React导航点击三级菜单自动折叠问题的解决方案。但通常可通过以下思路解决该问题: 在Ant Design React中,菜单组件一般使用`<Menu>`组件。要实现点击三级菜单自动折叠,需要利用该组件的属性和事件。可以借助`onClick`事件监听三级菜单的点击动作,然后通过设置`openKeys`属性来控制菜单的展开与折叠。 以下是一个示例代码: ```jsx import React, { useState } from &#39;react&#39;; import { Menu } from &#39;antd&#39;; import { MailOutlined, AppstoreOutlined, SettingOutlined } from &#39;@ant-design/icons&#39;; const { SubMenu } = Menu; const App = () => { const [openKeys, setOpenKeys] = useState([]); const onMenuClick = (e) => { // 处理点击事件,这里可以根据需求调整逻辑 if (e.keyPath.length === 3) { // 点击的是三级菜单 setOpenKeys([]); // 折叠所有菜单 } }; const onOpenChange = (keys) => { setOpenKeys(keys); }; return ( <Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} onClick={onMenuClick} style={{ width: 256 }} > <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One" > <SubMenu key="sub1-1" title="Submenu"> <Menu.Item key="sub1-1-1">Option 1</Menu.Item> <Menu.Item key="sub1-1-2">Option 2</Menu.Item> </SubMenu> </SubMenu> <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two" > <Menu.Item key="sub2-1">Option 3</Menu.Item> <Menu.Item key="sub2-2">Option 4</Menu.Item> </SubMenu> <SubMenu key="sub3" icon={<SettingOutlined />} title="Navigation Three" > <SubMenu key="sub3-1" title="Submenu"> <Menu.Item key="sub3-1-1">Option 5</Menu.Item> <Menu.Item key="sub3-1-2">Option 6</Menu.Item> </SubMenu> </SubMenu> </Menu> ); }; export default App; ``` 在上述代码中,通过`useState`钩子来管理菜单的展开状态`openKeys`。在`onMenuClick`函数中,判断点击的是否为三级菜单,如果是则将`openKeys`置为空数组,从而实现菜单的折叠。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值