Antd a-menu 样式修改

在这里插入图片描述
必须加一层div包裹才有效!!!!

#top {

	//悬浮,选择颜色
	:deep(.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item :hover),
	:deep(.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-selected) {
		color: #FF9900;
	}

	//悬浮下划线,选择后下划线
	:deep(.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after),
	:deep(.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after) {
		border-bottom: 0.10417rem solid #FF9900;
	}

}

在这里插入图片描述

### 修改 Ant Design 中 Menu 组件的子菜单偏移量 为了实现这一目标,可以通过自定义 CSS 或者利用 `SubMenu` 的属性来调整子菜单的位置。然而,在官方文档中并没有直接提供设置子菜单偏移量的 API[^1]。 #### 方法一:使用自定义样式覆盖默认样式 由于 Ant Design 使用了较为严格的 BEM 命名规范,可以直接针对 `.ant-dropdown-menu` 类或者其他关联类编写特定的选择器来进行样式重写: ```css /* 自定义CSS*/ .ant-dropdown-menu { margin-left: 20px !important; /* 调整左侧距离 */ } ``` 此方法简单易行,但是需要注意的是当框架版本更新时可能会因为内部结构变化而失效,因此建议配合开发者工具实时调试并确认最终效果。 #### 方法二:基于 JavaScript 动态计算位置 如果希望更加灵活地控制子菜单显示的具体坐标,则可以考虑监听 `visibleChange` 事件,并在此基础上手动调用 DOM 操作函数如 `getBoundingClientRect()` 来获取当前元素相对于视口的位置信息,进而动态设定新的 top 和 left 属性值给到下拉层容器节点上。 ```javascript import React from 'react'; import { Menu, Dropdown } from 'antd'; function MyCustomizedMenu() { const handleVisibleChange = (flag) => { if (!flag) return; setTimeout(() => { const dropdownNode = document.querySelector('.ant-dropdown'); const menuButtonRect = document.getElementById('trigger').getBoundingClientRect(); Object.assign(dropdownNode.style, { left: `${menuButtonRect.left}px`, top: `${menuButtonRect.bottom + 10}px`, // 这里可以根据需求加减数值以改变偏移量 }); }, 0); }; return ( <> <Dropdown overlay={<Menu />}> <button id="trigger">点击展开</button> </Dropdown> </> ); } export default MyCustomizedMenu; ``` 这种方法虽然复杂度稍高一些,但却能更好地适应不同场景下的布局需求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值