ant design menu 下拉菜单 样式修改不动，请教 第二次提问

下拉菜单，修改行高和背景色。看了好多贴子，都没用啊
https://www.antdv.com/components/menu-cn#components-menu-demo-horizontal 就第一个例子，水平的顶部导航菜单
第一次提问的：
https://ask.csdn.net/questions/7718329

我只是把原代码的局部 ：
做 了一点点修改 ，取消了组，于是 下拉菜单位 样式怎么都修改不动了
要修改 下拉菜单 行高和背景色

这是原来的：
    <a-sub-menu key="sub1">
      <template #icon>
        <setting-outlined />
      </template>
      <template #title>Navigation Three - Submenu</template>
      <a-menu-item-group title="Item 1">
        <a-menu-item key="setting:1">Option 1</a-menu-item>
        <a-menu-item key="setting:2">Option 2</a-menu-item>
      </a-menu-item-group>
      <a-menu-item-group title="Item 2">
        <a-menu-item key="setting:3">Option 3</a-menu-item>
        <a-menu-item key="setting:4">Option 4</a-menu-item>
      </a-menu-item-group>
    </a-sub-menu>

这是修改后的：
  <a-sub-menu key="sub1">
      <template #icon>
        <setting-outlined />
      </template>
      <template #title>Navigation Three - Submenu</template>
      // <a-menu-item-group title="Item 1"> 组不要
        <a-menu-item key="setting:1">Option 1</a-menu-item> // 这个要
        <a-menu-item key="setting:2">Option 2</a-menu-item> // 这个要
     //  </a-menu-item-group>
     // <a-menu-item-group title="Item 2"> 组不要
        <a-menu-item key="setting:3">Option 3</a-menu-item> // 这个要
        <a-menu-item key="setting:4">Option 4</a-menu-item>  // 这个要
     //</a-menu-item-group> 组不要
    </a-sub-menu>

按理说这样总可以吧，事实是不行。
.ant-menu-submenu-popup  li{
    background-color: rgb(185, 42, 42) !important;
}

.ant-menu-horizontal{
  line-height:50px!important;
  background:#f00  
}

上面的修改方案，我测试了是可以的

<template>
  <div>
    <a-menu mode="horizontal">
      <a-menu-item key="mail">
        <a-icon type="mail" />Navigation One
      </a-menu-item>
      <a-menu-item key="app" disabled>
        <a-icon type="appstore" />Navigation Two
      </a-menu-item>
      <a-sub-menu>
        <span slot="title" class="submenu-title-wrapper"
          ><a-icon type="setting" />Navigation Three - Submenu</span
        >
        <a-menu-item key="setting:1"> Option 1 </a-menu-item>
        <a-menu-item key="setting:2"> Option 2 </a-menu-item>
        <a-menu-item key="setting:3"> Option 3 </a-menu-item>
        <a-menu-item key="setting:4"> Option 4 </a-menu-item>
      </a-sub-menu>
      <a-menu-item key="alipay">
        <a href="https://antdv.com" target="_blank" rel="noopener noreferrer"
          >Navigation Four - Link</a
        >
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
export default {
  name: "demo",
  data() {
    return {
      
    };
  },
};
</script>
<style lang="scss" scoped>
.ant-menu-submenu-popup li {
  height: 30px !important;
  line-height: 30px !important;
  background-color: rgb(185, 42, 42) !important;
}
</style>

使用深度作用选择器，前边加上 ::v-deep 试试

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632