element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？

Question

element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？

在线示例

Element Plus Playground 1

示例代码

<script setup lang="ts">

</script>

<template>
   <el-menu
    ellipsis
    class="el-menu-popper-demo"
    mode="horizontal"
    :popper-offset="16"
    style="max-width: 600px"
  >
    <el-menu-item index="1">A</el-menu-item>
    <el-sub-menu index="2">
      <template #title>B</template>
      <el-menu-item index="2-1">C</el-menu-item>
      <el-menu-item index="2-2">D</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style>
</style>

期望能修改element-plus的el-menu怎么修改el-sub-menu的template的B的颜色为红色

做过的尝试

Element Plus Playground 2

<script setup lang="ts">

</script>

<template>
   <el-menu
    ellipsis
    class="el-menu-popper-demo"
    mode="horizontal"
    :popper-offset="16"
    style="max-width: 600px"
  >
    <el-menu-item index="1">A</el-menu-item>
    <el-sub-menu index="2">
      <template #title style="color: red">B</template>
      <el-menu-item index="2-1">C</el-menu-item>
      <el-menu-item index="2-2">D</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style>
</style>

但是B并没有变成红色。

回复@兔子先森（提示内容过长无法回复，只能在原文回复了）

没有效果

在线示例

Element Plus Playground 3

对应代码

<script setup lang="ts">

</script>

<template>
   <el-menu
    ellipsis
    class="el-menu-popper-demo"
    mode="horizontal"
    :popper-offset="16"
    style="max-width: 600px"
  >
    <el-menu-item index="1">A</el-menu-item>
    <el-sub-menu index="2" popper-class="popper_vertical">
      <template #title style="color: red">B</template>
      <el-menu-item index="2-1">C</el-menu-item>
      <el-menu-item index="2-2">D</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style>
.popper_vertical {
  color: red;
  background-color: blue;
}
</style>

Answer 1

<script setup lang="ts">

</script>

<template>
   <el-menu
    ellipsis
    class="el-menu-popper-demo"
    mode="horizontal"
    :popper-offset="16"
    style="max-width: 600px"
  >
    <el-menu-item index="1">A</el-menu-item>
    <el-sub-menu index="2">
      <template #title>
        <span class="custom-title">B</span>
      </template>
      <el-menu-item index="2-1">C</el-menu-item>
      <el-menu-item index="2-2">D</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style>
.custom-title {
  color: red !important;
}
</style>

或者：

<script setup lang="ts">

</script>

<template>
   <el-menu
    ellipsis
    class="custom-menu"
    mode="horizontal"
    :popper-offset="16"
    style="max-width: 600px"
  >
    <el-menu-item index="1">A</el-menu-item>
    <el-sub-menu index="2">
      <template #title>B</template>
      <el-menu-item index="2-1">C</el-menu-item>
      <el-menu-item index="2-2">D</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.custom-menu :deep(.el-sub-menu__title) {
  color: red !important;
}
</style>

Answer 2

可以试试这个：修改el-menu菜单折叠后的悬浮菜单