From 7f375f09af9c02482c8870e71a2de360b39b70f7 Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Thu, 12 Oct 2023 21:37:03 -0500
Subject: [PATCH] fix(components): [menu] remove excess inline styles (#13693)

* fix(components): [menu] remove excess inline styles

* fix(theme-chalk): [menu] fix styles
---
 packages/components/menu/src/sub-menu.ts | 28 +-----------------------
 packages/theme-chalk/src/menu.scss       |  2 +-
 2 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/packages/components/menu/src/sub-menu.ts b/packages/components/menu/src/sub-menu.ts
index 79d2ea30a5..dd9ca55eae 100644
--- a/packages/components/menu/src/sub-menu.ts
+++ b/packages/components/menu/src/sub-menu.ts
@@ -30,7 +30,7 @@ import useMenu from './use-menu'
 import { useMenuCssVar } from './use-menu-css-var'
 
 import type { Placement } from '@element-plus/components/popper'
-import type { CSSProperties, ExtractPropTypes, VNodeArrayChildren } from 'vue'
+import type { ExtractPropTypes, VNodeArrayChildren } from 'vue'
 import type { MenuProvider, SubMenuProvider } from './types'
 
 export const subMenuProps = buildProps({
@@ -187,9 +187,6 @@ export default defineComponent({
       return isActive
     })
 
-    const backgroundColor = computed(() => rootMenu.props.backgroundColor || '')
-    const activeTextColor = computed(() => rootMenu.props.activeTextColor || '')
-    const textColor = computed(() => rootMenu.props.textColor || '')
     const mode = computed(() => rootMenu.props.mode)
     const item = reactive({
       index: props.index,
@@ -198,21 +195,6 @@ export default defineComponent({
     })
 
     const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1)
-    const titleStyle = computed<CSSProperties>(() => {
-      if (mode.value !== 'horizontal') {
-        return {
-          color: textColor.value,
-        }
-      }
-      return {
-        borderBottomColor: active.value
-          ? rootMenu.props.activeTextColor
-            ? activeTextColor.value
-            : ''
-          : 'transparent',
-        color: active.value ? activeTextColor.value : textColor.value,
-      }
-    })
 
     // methods
     const doDestroy = () =>
@@ -412,10 +394,6 @@ export default defineComponent({
                   'div',
                   {
                     class: nsSubMenu.e('title'),
-                    style: [
-                      titleStyle.value,
-                      { backgroundColor: backgroundColor.value },
-                    ],
                     onClick: handleClick,
                   },
                   titleTag
@@ -427,10 +405,6 @@ export default defineComponent({
               'div',
               {
                 class: nsSubMenu.e('title'),
-                style: [
-                  titleStyle.value,
-                  { backgroundColor: backgroundColor.value },
-                ],
                 ref: verticalTitleRef,
                 onClick: handleClick,
               },
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index 4dbc4171a6..c31d55b07b 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -130,7 +130,7 @@
         color: getCssVar('menu-text-color');
 
         &:hover {
-          background-color: getCssVar('bg-color', 'overlay');
+          background-color: getCssVar('menu-bg-color');
         }
       }
     }