feat: Add ability to overwrite Menu theme at Menu.SubMenu level. (#33971)

* Add theme support to Menu.SubMenu

* Tidy up docs

* Tidy up docs

* Update components/menu/index.en-US.md

* Update components/menu/index.en-US.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

* Add Chinese lang docs

* Extend menu theme demo to additionally demonstrate Sub-menu theming

* Add submenu theme demo

* Revert "Extend menu theme demo to additionally demonstrate Sub-menu theming"

This reverts commit 642a2b5b72.

* Add tests

* Correct typo

* Make demo vertical so absolutely positioned popover doesn't overflow

* Make demo functional component

* Update components/menu/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>

* Update components/menu/index.zh-CN.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

* Update components/menu/demo/submenu-theme.md

Co-authored-by: MadCcc <1075746765@qq.com>

Co-authored-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>

components/menu/SubMenu.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SubMenu as RcSubMenu, useFullPath } from 'rc-menu';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import MenuContext from './MenuContext';
+import MenuContext, { MenuTheme } from './MenuContext';
 import { isValidElement, cloneElement } from '../_util/reactNode';
 
 interface TitleEventEntity {
@@ -23,10 +23,11 @@ export interface SubMenuProps {
   popupOffset?: [number, number];
   popupClassName?: string;
   children?: React.ReactNode;
+  theme?: MenuTheme;
 }
 
 function SubMenu(props: SubMenuProps) {
-  const { popupClassName, icon, title } = props;
+  const { popupClassName, icon, title, theme } = props;
   const context = React.useContext(MenuContext);
   const { prefixCls, inlineCollapsed, antdMenuTheme } = context;
 
@@ -71,7 +72,11 @@ function SubMenu(props: SubMenuProps) {
       <RcSubMenu
         {...omit(props, ['icon'])}
         title={titleNode}
-        popupClassName={classNames(prefixCls, `${prefixCls}-${antdMenuTheme}`, popupClassName)}
+        popupClassName={classNames(
+          prefixCls,
+          `${prefixCls}-${theme || antdMenuTheme}`,
+          popupClassName,
+        )}
       />
     </MenuContext.Provider>
   );

components/menu/__tests__/index.test.js

@@ -287,6 +287,32 @@ describe('Menu', () => {
     );
   });
 
+  describe('allows the overriding of theme at the popup submenu level', () => {
+    const menuModesWithPopupSubMenu = ['horizontal', 'vertical'];
+
+    menuModesWithPopupSubMenu.forEach(menuMode => {
+      it(`when menu is mode ${menuMode}`, () => {
+        const wrapper = mount(
+          <Menu mode={menuMode} openKeys={['1']} theme="dark">
+            <SubMenu key="1" title="submenu1" theme="light">
+              <Menu.Item key="submenu1">Option 1</Menu.Item>
+              <Menu.Item key="submenu2">Option 2</Menu.Item>
+            </SubMenu>
+            <Menu.Item key="2">menu2</Menu.Item>
+          </Menu>,
+        );
+
+        act(() => {
+          jest.runAllTimers();
+          wrapper.update();
+        });
+
+        expect(wrapper.find('ul.ant-menu-root').hasClass('ant-menu-dark')).toBeTruthy();
+        expect(wrapper.find('div.ant-menu-submenu-popup').hasClass('ant-menu-light')).toBeTruthy();
+      });
+    });
+  });
+
   // https://github.com/ant-design/ant-design/pulls/4677
   // https://github.com/ant-design/ant-design/issues/4692
   // TypeError: Cannot read property 'indexOf' of undefined

components/menu/demo/submenu-theme.md

@@ -0,0 +1,65 @@
+---
+order: 5
+title:
+  zh-CN: 子菜单主题
+  en-US: Sub-menu theme
+---
+
+## zh-CN
+
+内建了两套主题 `light` 和 `dark`，默认 `light`。
+
+## en-US
+
+The Sub-menu will inherit the theme of `Menu`, but you can override this at the `SubMenu` level via the `theme` prop.
+
+```jsx
+import { Menu, Switch } from 'antd';
+import { MailOutlined } from '@ant-design/icons';
+
+const { SubMenu } = Menu;
+
+const SubMenuTheme = () => {
+  const [theme, setTheme] = React.useState('light');
+  const [current, setCurrent] = React.useState('1');
+
+  const changeTheme = value => {
+    setTheme(value ? 'dark' : 'light');
+  };
+
+  const handleClick = e => {
+    setCurrent(e.key);
+  };
+
+  return (
+    <>
+      <Switch
+        checked={theme === 'dark'}
+        onChange={changeTheme}
+        checkedChildren="Dark"
+        unCheckedChildren="Light"
+      />
+      <br />
+      <br />
+      <Menu
+        onClick={handleClick}
+        style={{ width: 256 }}
+        defaultOpenKeys={['sub1']}
+        selectedKeys={[current]}
+        mode="vertical"
+        theme="dark"
+      >
+        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One" theme={theme}>
+          <Menu.Item key="1">Option 1</Menu.Item>
+          <Menu.Item key="2">Option 2</Menu.Item>
+          <Menu.Item key="3">Option 3</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="5">Option 5</Menu.Item>
+        <Menu.Item key="6">Option 6</Menu.Item>
+      </Menu>
+    </>
+  );
+};
+
+ReactDOM.render(<SubMenuTheme />, mountNode);
+```

components/menu/demo/switch-mode.md

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 切换菜单类型
   en-US: Switch the menu type

components/menu/index.en-US.md

@@ -90,7 +90,7 @@ More layouts with navigation: [Layout](/components/layout).
 ### Menu.SubMenu
 
 | Param | Description | Type | Default value | Version |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
 | children | Sub-menus or sub-menu items | Array<MenuItem \| SubMenu> | - |  |
 | disabled | Whether sub-menu is disabled | boolean | false |  |
 | icon | Icon of sub menu | ReactNode | - | 4.2.0 |
@@ -98,6 +98,7 @@ More layouts with navigation: [Layout](/components/layout).
 | popupClassName | Sub-menu class name, not working when `mode="inline"` | string | - |  |
 | popupOffset | Sub-menu offset, not working when `mode="inline"` | \[number, number] | - |  |
 | title | Title of sub menu | ReactNode | - |  |
+| theme | Color theme of the SubMenu (inherits from Menu by default) |  | `light` \| `dark` | - | 4.19.0 |
 | onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - |  |
 
 ### Menu.ItemGroup

components/menu/index.zh-CN.md

@@ -91,7 +91,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
 ### Menu.SubMenu
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
 | children | 子菜单的菜单项 | Array<MenuItem \| SubMenu> | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | icon | 菜单图标 | ReactNode | - | 4.2.0 |
@@ -100,6 +100,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
 | popupOffset | 子菜单偏移量，`mode="inline"` 时无效 | \[number, number] | - |  |
 | title | 子菜单项值 | ReactNode | - |  |
 | onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  |
+| theme | 设置子菜单的主题，默认从 Menu 上继承 |  | `light` \| `dark` | - | 4.19.0 |
 
 ### Menu.ItemGroup