如何修改Ant Design菜单项选中及hover时的下划线颜色？

你遇到的问题是因为Ant Design的菜单项hover状态的下划线同样是通过**::after伪元素**实现的，而不是直接给.ant-menu-item设置border-bottom。你之前直接给.ant-menu-item:hover加border-bottom，会和默认的伪元素下划线冲突，导致效果异常。

用以下代码替换你原来的hover样式即可解决：

&& .ant-menu-item:hover::after {
  border-bottom: 2px solid #659e38 !important;
}

补充说明： #

• Ant Design的Menu组件在选中、hover状态下的下划线，都是通过伪元素::after来渲染的，统一针对伪元素修改才能和默认样式的结构保持一致，避免布局错位。
• &&是styled-components里用来提升样式优先级的写法，确保你的自定义样式能覆盖Ant Design的默认样式。
• 如果需要同时处理子菜单的hover下划线，可以扩展选择器为.ant-menu-submenu:hover::after，用同样的方式修改颜色。

内容的提问来源于stack exchange，提问作者Jakub Sapko