如何移除Ant Design Vue子菜单的Chevron图标？

一、移除子菜单默认Chevron图标 #

有两种可靠实现方式：

方法1：组件原生属性控制（推荐） #

给<a-sub-menu>添加:icon="null"属性，直接禁用默认箭头图标：

<a-sub-menu key="languages" class="text-gray-900" :icon="null">
  <!-- 子菜单内容 -->
</a-sub-menu>

方法2：CSS隐藏（全局场景适用） #

如果需要全局移除所有子菜单箭头，或属性方法不生效，可用深度选择器覆盖默认样式：

<!-- Vue3 scoped样式 -->
:deep(.ant-menu-submenu-arrow) {
  display: none !important;
}

<!-- 全局样式（无需scoped） -->
.ant-menu-submenu-arrow {
  display: none !important;
}

二、修复自定义样式不生效问题 #

你的样式无效是因为Vue的scoped样式无法穿透Ant Design的组件DOM结构，需用深度选择器解决：

步骤1：给Menu添加唯一类名 #

给<a-menu>添加自定义类名便于精准定位，同时修正箭头绑定的语法错误（原arrow="{false}"改为:arrow="false"）：

<a-menu
  class="custom-user-menu bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 w-64"
  :arrow="false"
>

步骤2：用深度选择器编写样式 #

在<style scoped>中使用:deep()（Vue3）或::v-deep（Vue2）穿透样式：

<style scoped>
/* 确保子菜单标题hover样式生效 */
:deep(.custom-user-menu .ant-menu-submenu-title) {
  border-radius: 6px;
  transition: background-color 0.3s;
}

:deep(.custom-user-menu .ant-menu-submenu-title:hover) {
  background-color: #eff6ff !important;
}

/* 确保菜单项自定义样式生效 */
:deep(.custom-user-menu .ant-menu-item) {
  border-radius: 6px;
}
</style>

三、完整修改后的代码示例 #

<template>
  <a-dropdown :arrow="{ pointAtCenter: true }" :trigger="['click']">
    <div
      class="flex items-center pl-4 cursor-pointer transition-transform transform hover:scale-105"
    >
      <CaUserAvatarFilledAlt
        class="text-3xl text-gray-700 hover:text-gray-900 transition-colors duration-300"
      />
    </div>
    <template #overlay>
      <a-menu
        class="custom-user-menu bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 w-64"
        :arrow="false"
      >
        <a-menu-item
          key="settings"
          class="flex items-center p-2 hover:bg-blue-100 rounded-md transition-colors duration-300"
        >
          <div class="flex flex-row items-center" @click.prevent="openModal">
            <div class="mr-2">
              <SettingOutlined class="text-lg text-gray-600" />
            </div>
            <p class="ml-2 text-gray-900">Settings</p>
          </div>
        </a-menu-item>
        <!-- 添加:icon="null"移除Chevron -->
        <a-sub-menu key="languages" class="text-gray-900" :icon="null">
          <template v-slot:title>
            <div
              class="flex items-center rounded-md py-1 transition-colors duration-300 flex-row"
            >
              <div class="mr-2">
                <HiLanguage class="text-lg text-gray-600" />
              </div>
              <p class="text-gray-900 ml-2">Change Language</p>
            </div>
          </template>

          <a-menu-item
            key="tm"
            @click.prevent="changeLocale('tm')"
            class="flex items-center p-2 hover:bg-blue-100 rounded-md transition-colors duration-300"
          >
            <div class="flex flex-row items-center">
              <div class="mr-2">
                <CountryFlag size="normal" country="tm" />
              </div>
              <p class="text-gray-900">Türkmen dili</p>
            </div>
          </a-menu-item>
          <a-menu-item
            key="ru"
            @click.prevent="changeLocale('ru')"
            class="flex items-center hover:bg-blue-100 rounded-md transition-colors duration-300"
          >
            <div class="flex flex-row items-center">
              <div class="mr-2">
                <CountryFlag size="normal" country="ru" class="" />
              </div>
              <p class="text-gray-900">Русский язык</p>
            </div>
          </a-menu-item>
          <a-menu-item
            key="en"
            @click.prevent="changeLocale('en')"
            class="flex items-center p-2 hover:bg-blue-100 rounded-md transition-colors duration-300"
          >
            <div class="flex flex-row items-center">
              <div class="mr-2">
                <CountryFlag size="normal" country="gb" />
              </div>
              <p class="text-gray-900">English</p>
            </div>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item
          key="logout"
          @click.prevent="logout"
          class="flex items-center p-2 hover:bg-red-100 rounded-md transition-colors duration-300"
        >
          <div class="flex flex-row items-center">
            <div class="mr-2">
              <LogoutOutlined class="text-lg text-red-600" />
            </div>
            <p class="ml-2 text-red-600">Logout</p>
          </div>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<style scoped>
/* 穿透样式确保生效 */
:deep(.custom-user-menu .ant-menu-submenu-arrow) {
  display: none;
}

/* 可选：强化子菜单标题hover效果 */
:deep(.custom-user-menu .ant-menu-submenu-title:hover) {
  background-color: #eff6ff !important;
}
</style>

关键提示 #

1. 移除Chevron优先用:icon="null"，这是组件原生支持的方式，比CSS更稳定；
2. scoped样式必须用深度选择器才能作用到Ant Design的内部DOM；
3. 注意Vue的绑定语法：布尔值属性需要用:arrow="false"，而非arrow="{false}"。

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