diff --git a/components/menu/style/horizontal.tsx b/components/menu/style/horizontal.tsx index 4a70cc1c93..7ce1f582cc 100644 --- a/components/menu/style/horizontal.tsx +++ b/components/menu/style/horizontal.tsx @@ -10,6 +10,7 @@ const getHorizontalStyle: GenerateStyle = token => { lineWidth, lineType, menuItemPaddingInline, + menuItemMarginInline, } = token; return { @@ -32,6 +33,7 @@ const getHorizontalStyle: GenerateStyle = 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 4260536ce6..3f10f53cef 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -55,6 +55,7 @@ export interface MenuToken extends FullToken<'Menu'> { menuItemHeight: number; menuHorizontalHeight: number; menuItemPaddingInline: number; + menuItemMarginInline: number; menuArrowSize: number; menuArrowOffset: string; menuPanelMaskInset: number; @@ -404,7 +405,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul // Menu Token const menuToken = mergeToken(token, { menuItemHeight: controlHeightLG, - menuItemPaddingInline: controlHeightLG / 2, + menuItemPaddingInline: token.margin, + menuItemMarginInline: token.marginXXS, menuArrowSize, menuHorizontalHeight: controlHeightLG * 1.15, menuArrowOffset: `${menuArrowSize * 0.25}px`, diff --git a/components/menu/style/vertical.tsx b/components/menu/style/vertical.tsx index a0bbcad941..73c95e9a98 100644 --- a/components/menu/style/vertical.tsx +++ b/components/menu/style/vertical.tsx @@ -3,7 +3,7 @@ import type { MenuToken } from '.'; import type { GenerateStyle } from '../../theme'; const getVerticalInlineStyle: GenerateStyle = token => { - const { componentCls, menuItemHeight, marginXS, padding, marginXXS, menuArrowSize, fontSize } = + const { componentCls, menuItemHeight, menuItemMarginInline, padding, menuArrowSize, fontSize } = token; const paddingWithArrow = menuArrowSize + fontSize; @@ -16,7 +16,7 @@ const getVerticalInlineStyle: GenerateStyle = token => { [`${componentCls}-item, ${componentCls}-submenu-title`]: { height: menuItemHeight, lineHeight: `${menuItemHeight}px`, - marginBlock: marginXXS, + marginBlock: menuItemMarginInline, paddingInline: padding, overflow: 'hidden', textOverflow: 'ellipsis', @@ -27,10 +27,6 @@ const getVerticalInlineStyle: GenerateStyle = token => { paddingBottom: 0.02, }, - [`${componentCls}-item:not(:last-child)`]: { - marginBottom: marginXS, - }, - [`> ${componentCls}-item, > ${componentCls}-submenu > ${componentCls}-submenu-title`]: { height: menuItemHeight,