diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index 4854e3a3f9..4c786a1f3d 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -941,7 +941,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul colorItemBgHover: colorBgTextHover, itemHoverBg: colorBgTextHover, colorItemBgActive: colorFillContent, - itemActiveBg: colorFillContent, + itemActiveBg: controlItemBgActive, colorSubItemBg: colorFillAlter, subMenuItemBg: colorFillAlter, colorItemBgSelected: controlItemBgActive, diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx index 5be20ef0f1..3b2215b924 100644 --- a/components/menu/style/theme.tsx +++ b/components/menu/style/theme.tsx @@ -38,6 +38,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation dangerItemSelectedBg, itemHoverBg, + itemActiveBg, menuSubMenuBg, // Horizontal @@ -75,11 +76,12 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation }, // Hover - [`${componentCls}-item:hover, ${componentCls}-submenu-title:hover`]: { - [`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: { - color: itemHoverColor, + [`${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: + { + [`&:hover, > ${componentCls}-submenu-title:hover`]: { + color: itemHoverColor, + }, }, - }, [`&:not(${componentCls}-horizontal)`]: { [`${componentCls}-item:not(${componentCls}-item-selected)`]: { @@ -88,7 +90,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation }, '&:active': { - backgroundColor: itemSelectedBg, + backgroundColor: itemActiveBg, }, }, @@ -98,7 +100,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation }, '&:active': { - backgroundColor: itemSelectedBg, + backgroundColor: itemActiveBg, }, }, }, @@ -193,6 +195,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation [`&-selected`]: { color: horizontalItemSelectedColor, backgroundColor: horizontalItemSelectedBg, + '&:hover': { + backgroundColor: horizontalItemSelectedBg, + }, '&::after': { borderBottomWidth: activeBarHeight, borderBottomColor: horizontalItemSelectedColor,