feat: support classNames and styles

Author: thinkasany

src/MenuItemGroup.tsx

@@ -20,7 +20,7 @@ export interface MenuItemGroupProps extends Omit<MenuItemGroupType, 'type' | 'ch
 
 const InternalMenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps>((props, ref) => {
   const { className, title, eventKey, children, ...restProps } = props;
-  const { prefixCls } = React.useContext(MenuContext);
+  const { prefixCls, classNames: menuClassNames, styles } = React.useContext(MenuContext);
 
   const groupPrefixCls = `${prefixCls}-item-group`;
 
@@ -34,12 +34,17 @@ const InternalMenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps
     >
       <div
         role="presentation"
-        className={`${groupPrefixCls}-title`}
+        className={classNames(`${groupPrefixCls}-title`, menuClassNames?.listTitle)}
+        style={styles?.listTitle}
         title={typeof title === 'string' ? title : undefined}
       >
         {title}
       </div>
-      <ul role="group" className={`${groupPrefixCls}-list`}>
+      <ul
+        role="group"
+        className={classNames(`${groupPrefixCls}-list`, menuClassNames?.list)}
+        style={styles?.list}
+      >
         {children}
       </ul>
     </li>

src/SubMenu/index.tsx

@@ -22,7 +22,10 @@ import {
 import { useMenuId } from '../context/IdContext';
 import PrivateContext from '../context/PrivateContext';
 
+export type SemanticName = 'list' | 'listTitle';
 export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children' | 'label'> {
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   title?: React.ReactNode;
 
   children?: React.ReactNode;
@@ -45,6 +48,9 @@ const InternalSubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, re
     style,
     className,
 
+    styles,
+    classNames: menuClassNames,
+
     title,
     eventKey,
     warnKey,
@@ -275,6 +281,8 @@ const InternalSubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, re
   const renderPopupContent = React.useMemo(() => {
     const originNode = (
       <MenuContextProvider
+        classNames={menuClassNames}
+        styles={styles}
         mode={popupContentTriggerMode === 'horizontal' ? 'vertical' : popupContentTriggerMode}
       >
         <SubMenuList id={popupId} ref={popupRef}>
@@ -363,6 +371,8 @@ const InternalSubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, re
   // >>>>> Render
   return (
     <MenuContextProvider
+      classNames={menuClassNames}
+      styles={styles}
       onItemClick={onMergedItemClick}
       mode={mode === 'horizontal' ? 'vertical' : mode}
       itemIcon={mergedItemIcon}

src/context/MenuContext.tsx

@@ -10,9 +10,12 @@ import type {
   TriggerSubMenuAction,
   PopupRender,
 } from '../interface';
+import { SubMenuProps } from '..';
 
 export interface MenuContextProps {
   prefixCls: string;
+  classNames?: SubMenuProps['classNames'];
+  styles?: SubMenuProps['styles'];
   rootClassName?: string;
   openKeys: string[];
   rtl?: boolean;

tests/SubMenu.spec.tsx

@@ -2,7 +2,7 @@
 import { act, fireEvent, render } from '@testing-library/react';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
-import Menu, { MenuItem, SubMenu } from '../src';
+import Menu, { MenuItem, MenuItemGroup, SubMenu } from '../src';
 import { isActive, last } from './util';
 
 jest.mock('@rc-component/trigger', () => {
@@ -483,5 +483,32 @@ describe('SubMenu', () => {
       '150px',
     );
   });
+  it('support classNames and styles', () => {
+    const testClassNames = {
+      list: 'test-list',
+      listTitle: 'test-list-title',
+    };
+    const testStyles = {
+      list: { color: 'red' },
+      listTitle: { color: 'blue' },
+    };
+    const { container } = render(
+      <Menu openKeys={['s1']}>
+        <SubMenu key="s1" title="submenu1" classNames={testClassNames} styles={testStyles}>
+          <MenuItemGroup title="group 1" key="2">
+            <MenuItem key="s1-1">1</MenuItem>
+          </MenuItemGroup>
+        </SubMenu>
+      </Menu>,
+    );
+    fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title'));
+    runAllTimer();
+    const list = container.querySelector('.rc-menu-item-group-list');
+    const listTitle = container.querySelector('.rc-menu-item-group-title');
+    expect(list).toHaveClass(testClassNames.list);
+    expect(list).toHaveStyle(testStyles.list);
+    expect(listTitle).toHaveClass(testClassNames.listTitle);
+    expect(listTitle).toHaveStyle(testStyles.listTitle);
+  });
 });
 /* eslint-enable */