feat: ConfigProvider support Menu className and style properties (#43382)

components/config-provider/__tests__/style.test.tsx

@@ -17,6 +17,7 @@ import Image from '../../image';
 import Input from '../../input';
 import Layout from '../../layout';
 import Mentions from '../../mentions';
+import Menu from '../../menu';
 import message from '../../message';
 import Modal from '../../modal';
 import notification from '../../notification';
@@ -25,9 +26,9 @@ import Progress from '../../progress';
 import Radio from '../../radio';
 import Rate from '../../rate';
 import Result from '../../result';
-import Skeleton from '../../skeleton';
 import Segmented from '../../segmented';
 import Select from '../../select';
+import Skeleton from '../../skeleton';
 import Slider from '../../slider';
 import Space from '../../space';
 import Spin from '../../spin';
@@ -378,6 +379,46 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ background: 'red' });
   });
 
+  it('Should Menu className works', () => {
+    const menuItems = [
+      {
+        label: 'Test Label',
+        key: 'test',
+      },
+    ];
+    const { container } = render(
+      <ConfigProvider
+        menu={{
+          className: 'test-class',
+        }}
+      >
+        <Menu items={menuItems} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-menu')).toHaveClass('test-class');
+  });
+
+  it('Should Menu style works', () => {
+    const menuItems = [
+      {
+        label: 'Test Label',
+        key: 'test',
+      },
+    ];
+    const { container } = render(
+      <ConfigProvider
+        menu={{
+          style: { color: 'red' },
+        }}
+      >
+        <Menu items={menuItems} style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-menu')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Mentions className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -111,6 +111,7 @@ export interface ConfigConsumerProps {
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;
+  menu?: ComponentStyleConfig;
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
   empty?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -117,6 +117,7 @@ const {
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 |
 | layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| menu | Set Menu common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | modal | Set Modal common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -155,6 +155,7 @@ export interface ConfigProviderProps {
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;
+  menu?: ComponentStyleConfig;
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
   empty?: ComponentStyleConfig;
@@ -279,6 +280,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     result,
     slider,
     breadcrumb,
+    menu,
     pagination,
     input,
     empty,
@@ -366,6 +368,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     result,
     slider,
     breadcrumb,
+    menu,
     pagination,
     empty,
     badge,

components/config-provider/index.zh-CN.md

@@ -119,6 +119,7 @@ const {
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | layout | 设置 Layout 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| menu | 设置 Menu 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/menu/menu.tsx

@@ -41,13 +41,14 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
   const override = React.useContext(OverrideContext);
   const overrideObj = override || {};
 
-  const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, getPopupContainer, direction, menu } = React.useContext(ConfigContext);
 
   const rootPrefixCls = getPrefixCls();
 
   const {
     prefixCls: customizePrefixCls,
     className,
+    style,
     theme = 'light',
     expandIcon,
     _internalDisableMenuItemTitleTooltip,
@@ -119,7 +120,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
 
   const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls, !override);
-  const menuClassName = classNames(`${prefixCls}-${theme}`, className);
+  const menuClassName = classNames(`${prefixCls}-${theme}`, menu?.className, className);
 
   // ====================== Expand Icon ========================
   let mergedExpandIcon: MenuProps[`expandIcon`];
@@ -163,6 +164,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
           onClick={onItemClick}
           {...passedProps}
           inlineCollapsed={mergedInlineCollapsed}
+          style={{ ...menu?.style, ...style }}
           className={menuClassName}
           prefixCls={prefixCls}
           direction={direction}