From 3aedb2f4e8e92c7d70ab1dfd628df59a46393ada Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Wed, 5 Jul 2023 19:48:33 +0800 Subject: [PATCH] feat: ConfigProvider support Menu className and style properties (#43382) --- .../config-provider/__tests__/style.test.tsx | 43 ++++++++++++++++++- components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + components/menu/menu.tsx | 6 ++- 6 files changed, 52 insertions(+), 3 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index e189396d1c..bc3c3a411e 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/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( + + + , + ); + + expect(container.querySelector('.ant-menu')).toHaveClass('test-class'); + }); + + it('Should Menu style works', () => { + const menuItems = [ + { + label: 'Test Label', + key: 'test', + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-menu')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Mentions className & style works', () => { const { container } = render( = (props) => { result, slider, breadcrumb, + menu, pagination, input, empty, @@ -366,6 +368,7 @@ const ProviderChildren: React.FC = (props) => { result, slider, breadcrumb, + menu, pagination, empty, badge, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 5f5c55665e..9f7ed17bd4 100644 --- a/components/config-provider/index.zh-CN.md +++ b/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 | diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx index 07a9281e74..3aa3df78da 100644 --- a/components/menu/menu.tsx +++ b/components/menu/menu.tsx @@ -41,13 +41,14 @@ const InternalMenu = forwardRef((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((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((props, ref) => { onClick={onItemClick} {...passedProps} inlineCollapsed={mergedInlineCollapsed} + style={{ ...menu?.style, ...style }} className={menuClassName} prefixCls={prefixCls} direction={direction}