如何修改antdesignvue 菜单悬浮出的子菜单样式

如何修改antdesignvue 菜单悬浮出的子菜单样式

使用官方的popupClassName不生效

.popclass{
    .ant-menu-submenu-popup > .ant-menu{
        background-color: #EE786C !important;
    }
}

通过 sub-menu-active-bg-color 属性修改子菜单悬浮时的背景色。可以在全局样式中修改，也可以在组件中使用 :style 动态绑定。

/* 在全局样式中修改 */
.ant-menu-submenu-active {
  background-color: #f0f0f0;
}
/* 在组件中使用 :style 动态绑定 */
<template>
  <a-menu>
    <a-sub-menu :style="{ backgroundColor: '#f0f0f0' }">
      <template #title>Submenu</template>
      <a-menu-item>Item 1</a-menu-item>
      <a-menu-item>Item 2</a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>

通过修改子菜单的样式类名，实现更多自定义样式。

/* 修改子菜单悬浮时的样式类名 */
.ant-menu-submenu:hover > .ant-menu-submenu-title {
  background-color: #f0f0f0;
  color: #222;
}
/* 修改子菜单展开时的样式类名 */
.ant-menu-submenu-open > .ant-menu-submenu-title {
  background-color: #f0f0f0;
  color: #222;
}

直接这样试试，我看你用了 插槽 span 应给可以直接设置样式吧

.popclass{
  
        background-color: #EE786C !important;
  
}