feat: menu support css variable theme

components/menu/SubMenu.tsx

@@ -7,6 +7,7 @@ import { useZIndex } from '../_util/hooks/useZIndex';
 import { cloneElement, isValidElement } from '../_util/reactNode';
 import type { MenuContextProps, MenuTheme } from './MenuContext';
 import MenuContext from './MenuContext';
+import useCSSVar from './style/cssVar';
 
 interface TitleEventEntity {
   key: string;
@@ -34,6 +35,7 @@ const SubMenu: React.FC<SubMenuProps> = (props) => {
   const context = React.useContext(MenuContext);
   const { prefixCls, inlineCollapsed, theme: contextTheme } = context;
 
+  const wrapCSSVar = useCSSVar(prefixCls);
   const parentPath = useFullPath();
 
   let titleNode: React.ReactNode;
@@ -70,7 +72,7 @@ const SubMenu: React.FC<SubMenuProps> = (props) => {
   // ============================ zIndex ============================
   const [zIndex] = useZIndex('Menu');
 
-  return (
+  return wrapCSSVar(
     <MenuContext.Provider value={contextValue}>
       <RcSubMenu
         {...omit(props, ['icon'])}
@@ -84,7 +86,7 @@ const SubMenu: React.FC<SubMenuProps> = (props) => {
           zIndex,
         }}
       />
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 };
 

components/menu/menu.tsx

@@ -18,6 +18,8 @@ import type { MenuContextProps, MenuTheme } from './MenuContext';
 import MenuContext from './MenuContext';
 import OverrideContext from './OverrideContext';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface MenuProps extends Omit<RcMenuProps, 'items'> {
   theme?: MenuTheme;
@@ -120,7 +122,9 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
   };
 
   const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls, !override);
+  const [, hashId] = useStyle(prefixCls, !override);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
   const menuClassName = classNames(`${prefixCls}-${theme}`, menu?.className, className);
 
   // ====================== Expand Icon ========================
@@ -156,7 +160,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
   );
 
   // ========================= Render ==========================
-  return wrapSSR(
+  return wrapCSSVar(
     <OverrideContext.Provider value={null}>
       <MenuContext.Provider value={contextValue}>
         <RcMenu
@@ -179,7 +183,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
           defaultMotions={defaultMotions}
           expandIcon={mergedExpandIcon}
           ref={ref}
-          rootClassName={classNames(rootClassName, hashId, overrideObj.rootClassName)}
+          rootClassName={classNames(rootClassName, hashId, overrideObj.rootClassName, rootCls)}
         >
           {mergedChildren}
         </RcMenu>

components/menu/style/cssVar.ts

@@ -0,0 +1,8 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Menu', prepareComponentToken, {
+  unitless: {
+    groupTitleLineHeight: true,
+  },
+});

components/menu/style/horizontal.tsx

@@ -1,3 +1,4 @@
+import { unit } from '@ant-design/cssinjs';
 import type { MenuToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
@@ -16,7 +17,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
     [`${componentCls}-horizontal`]: {
       lineHeight: horizontalLineHeight,
       border: 0,
-      borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
+      borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
       boxShadow: 'none',
 
       '&::after': {