feat: menu support css variable theme

components/menu/MenuDivider.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { Divider } from 'rc-menu';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
+import useCSSVar from './style/cssVar';
 
 export interface MenuDividerProps extends React.HTMLAttributes<HTMLLIElement> {
   className?: string;
@@ -15,14 +16,15 @@ const MenuDivider: React.FC<MenuDividerProps> = (props) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('menu', customizePrefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
   const classString = classNames(
     {
       [`${prefixCls}-item-divider-dashed`]: !!dashed,
     },
     className,
   );
 
-  return <Divider className={classString} {...restProps} />;
+  return wrapCSSVar(<Divider className={classString} {...restProps} />);
 };
 
 export default MenuDivider;

components/menu/MenuItem.tsx

@@ -11,6 +11,7 @@ import Tooltip from '../tooltip';
 import { cloneElement, isValidElement } from '../_util/reactNode';
 import type { MenuContextProps } from './MenuContext';
 import MenuContext from './MenuContext';
+import useCSSVar from './style/cssVar';
 
 export interface MenuItemProps extends Omit<RcMenuItemProps, 'title'> {
   icon?: React.ReactNode;
@@ -56,6 +57,8 @@ const MenuItem: GenericComponent = (props) => {
     return wrapNode;
   };
 
+  const wrapCSSVar = useCSSVar(prefixCls);
+
   const { siderCollapsed } = React.useContext<SiderContextProps>(SiderContext);
 
   let tooltipTitle = title;
@@ -110,7 +113,7 @@ const MenuItem: GenericComponent = (props) => {
       </Tooltip>
     );
   }
-  return returnNode;
+  return wrapCSSVar(returnNode);
 };
 
 export default MenuItem;

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,7 @@ import type { MenuContextProps, MenuTheme } from './MenuContext';
 import MenuContext from './MenuContext';
 import OverrideContext from './OverrideContext';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export interface MenuProps extends Omit<RcMenuProps, 'items'> {
   theme?: MenuTheme;
@@ -120,7 +121,8 @@ 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 wrapCSSVar = useCSSVar(rootPrefixCls);
   const menuClassName = classNames(`${prefixCls}-${theme}`, menu?.className, className);
 
   // ====================== Expand Icon ========================
@@ -156,7 +158,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
   );
 
   // ========================= Render ==========================
-  return wrapSSR(
+  return wrapCSSVar(
     <OverrideContext.Provider value={null}>
       <MenuContext.Provider value={contextValue}>
         <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': {