From 1de2f4be7834619939a4479ce28fe3062e54d15f Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 25 Nov 2022 16:00:01 +0800
Subject: [PATCH] fix: menu overflow (#38989)

---
 components/menu/style/horizontal.tsx |  2 --
 components/menu/style/index.tsx      | 16 ++++++++++++----
 components/menu/style/theme.tsx      |  3 ++-
 components/menu/style/vertical.tsx   |  4 ++--
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/menu/style/horizontal.tsx b/components/menu/style/horizontal.tsx
index 99548bbfa20b..fad8ffd7215e 100644
--- a/components/menu/style/horizontal.tsx
+++ b/components/menu/style/horizontal.tsx
@@ -10,7 +10,6 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
     lineWidth,
     lineType,
     menuItemPaddingInline,
-    menuItemMarginInline,
   } = token;
 
   return {
@@ -33,7 +32,6 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
         display: 'inline-block',
         verticalAlign: 'bottom',
         paddingInline: menuItemPaddingInline,
-        marginInline: menuItemMarginInline,
       },
 
       [`> ${componentCls}-item:hover,
diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
index 4a50a51ef82f..88cf94da0624 100644
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@@ -60,10 +60,10 @@ export interface MenuToken extends FullToken<'Menu'> {
   menuItemHeight: number;
   menuHorizontalHeight: number;
   menuItemPaddingInline: number;
-  menuItemMarginInline: number;
   menuArrowSize: number;
   menuArrowOffset: string;
   menuPanelMaskInset: number;
+  menuSubMenuBg: string;
 }
 
 // =============================== Base ===============================
@@ -409,8 +409,14 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         return [];
       }
 
-      const { colorPrimary, colorError, colorErrorHover, colorTextLightSolid, colorTextSecondary } =
-        token;
+      const {
+        colorBgElevated,
+        colorPrimary,
+        colorError,
+        colorErrorHover,
+        colorTextLightSolid,
+        colorTextSecondary,
+      } = token;
 
       const { controlHeightLG, fontSize } = token;
 
@@ -420,11 +426,11 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
       const menuToken = mergeToken<MenuToken>(token, {
         menuItemHeight: controlHeightLG,
         menuItemPaddingInline: token.margin,
-        menuItemMarginInline: token.marginXXS,
         menuArrowSize,
         menuHorizontalHeight: controlHeightLG * 1.15,
         menuArrowOffset: `${menuArrowSize * 0.25}px`,
         menuPanelMaskInset: -7, // Still a hardcode here since it's offset by rc-align
+        menuSubMenuBg: colorBgElevated,
       });
 
       const menuDarkToken = mergeToken<MenuToken>(
@@ -451,6 +457,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
           colorDangerItemTextSelected: colorTextLightSolid,
           colorDangerItemBgActive: colorError,
           colorDangerItemBgSelected: colorError,
+
+          menuSubMenuBg: '#001529',
         },
         {
           ...overrideComponentToken,
diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx
index 4841236cefd9..e7da69ea0d33 100644
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@@ -40,6 +40,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     colorDangerItemBgSelected,
 
     colorItemBgHover,
+    menuSubMenuBg,
   } = token;
 
   return {
@@ -145,7 +146,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
       },
 
       [`&${componentCls}-submenu > ${componentCls}`]: {
-        backgroundColor: colorItemBg,
+        backgroundColor: menuSubMenuBg,
       },
 
       [`&${componentCls}-popup > ${componentCls}`]: {
diff --git a/components/menu/style/vertical.tsx b/components/menu/style/vertical.tsx
index affdb7b38cb9..eee107ea2761 100644
--- a/components/menu/style/vertical.tsx
+++ b/components/menu/style/vertical.tsx
@@ -7,11 +7,11 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
   const {
     componentCls,
     menuItemHeight,
-    menuItemMarginInline,
     itemMarginInline,
     padding,
     menuArrowSize,
     fontSize,
+    marginXXS,
   } = token;
 
   const paddingWithArrow = menuArrowSize + fontSize;
@@ -29,7 +29,7 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
       textOverflow: 'ellipsis',
 
       marginInline: itemMarginInline,
-      marginBlock: menuItemMarginInline,
+      marginBlock: marginXXS,
       width: `calc(100% - ${itemMarginInline * 2}px)`,
     },