diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
index 64222338f213..3c7f980cd058 100644
--- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -406,6 +406,412 @@ Array [
]
`;
+exports[`renders ./components/menu/demo/horizontal-dark.tsx extend context correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Top Navigation
+Top Navigation (dark)
Inline menu
Collapsed inline menu
Open current submenu only
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
index 49e413dedae3..ccc6f98473aa 100644
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@@ -23,6 +23,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAA
顶部导航
+顶部导航（dark）
内嵌菜单
缩起内嵌菜单
只展开当前父级菜单
diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
index 2625175bd938..dcae54b19f58 100644
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@@ -441,14 +441,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
return [];
}
- const {
- colorBgElevated,
- colorPrimary,
- colorError,
- colorErrorHover,
- colorTextLightSolid,
- colorTextSecondary,
- } = token;
+ const { colorBgElevated, colorPrimary, colorError, colorErrorHover, colorTextLightSolid } =
+ token;
const { controlHeightLG, fontSize } = token;
@@ -465,12 +459,14 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
menuSubMenuBg: colorBgElevated,
});
+ const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
+
const menuDarkToken = mergeToken(
menuToken,
{
- colorItemText: new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
+ colorItemText: colorTextDark,
colorItemTextHover: colorTextLightSolid,
- colorGroupTitle: colorTextSecondary,
+ colorGroupTitle: colorTextDark,
colorItemTextSelected: colorTextLightSolid,
colorItemBg: '#001529',
colorSubItemBg: '#000c17',
@@ -491,6 +487,10 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
colorDangerItemBgSelected: colorError,
menuSubMenuBg: '#001529',
+
+ // Horizontal
+ colorItemTextSelectedHorizontal: colorTextLightSolid,
+ colorItemBgSelectedHorizontal: colorPrimary,
},
{
...overrideComponentToken,
diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx
index 9d98e46e2fd0..cd375a182b7a 100644
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@@ -11,11 +11,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
componentCls,
colorItemText,
colorItemTextSelected,
- colorItemTextSelectedHorizontal,
colorGroupTitle,
colorItemBg,
colorSubItemBg,
- colorItemBgSelectedHorizontal,
colorItemBgSelected,
colorActiveBarHeight,
colorActiveBarWidth,
@@ -41,6 +39,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
colorItemBgHover,
menuSubMenuBg,
+
+ // Horizontal
+ colorItemTextSelectedHorizontal,
+ colorItemBgSelectedHorizontal,
} = token;
return {
@@ -85,6 +87,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
backgroundColor: colorItemBgSelected,
},
},
+
[`${componentCls}-submenu-title`]: {
'&:hover': {
backgroundColor: colorItemBgHover,
@@ -130,7 +133,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
},
},
- [`&:not(${componentCls}-horizontal) ${componentCls}-item-selected`]: {
+ [`& ${componentCls}-item-selected`]: {
backgroundColor: colorItemBgSelected,
// Danger
@@ -165,7 +168,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
top: colorActiveBarBorderSize,
marginTop: -colorActiveBarBorderSize,
marginBottom: 0,
- borderRadius: token.radiusItem,
+ borderRadius: 0,
'&::after': {
position: 'absolute',