diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx index 05004a051e..136843e2c5 100644 --- a/components/image/PreviewGroup.tsx +++ b/components/image/PreviewGroup.tsx @@ -9,6 +9,7 @@ import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined'; import RcImage from 'rc-image'; import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup'; import * as React from 'react'; +import classNames from 'classnames'; import { ConfigContext } from '../config-provider'; import { getTransitionName } from '../_util/motion'; @@ -44,12 +45,13 @@ const InternalPreviewGroup: React.FC = ({ return preview; } const _preview = typeof preview === 'object' ? preview : {}; + const mergedRootClassName = classNames(hashId, _preview.rootClassName ?? ''); return { ..._preview, transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName), maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName), - rootClassName: hashId, + rootClassName: mergedRootClassName, }; }, [preview]); diff --git a/components/image/__tests__/index.test.tsx b/components/image/__tests__/index.test.tsx index 89ca082001..09cc6c744c 100644 --- a/components/image/__tests__/index.test.tsx +++ b/components/image/__tests__/index.test.tsx @@ -105,4 +105,15 @@ describe('Image', () => { fireEvent.load(baseElement.querySelector('.ant-image-preview-img')!); expect(onLoadCb).toHaveBeenCalled(); }); + it('Preview should support rootClassName', () => { + const { container, baseElement } = render( + + + , + ); + + fireEvent.click(container.querySelector('.ant-image')!); + + expect(baseElement.querySelector('.test-root-class')).toBeTruthy(); + }); }); diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index de63dde018..2aa623cc39 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -51,6 +51,7 @@ Previewable image. src?: string; // v4.10.0 mask?: ReactNode; // v4.9.0 maskClassName?: string; // v4.11.0 + rootClassName?: string; // only support after v5.4.0 current?: number; // v4.12.0 Only support PreviewGroup countRender?: (current: number, total: number) => string // v4.20.0 Only support PreviewGroup scaleStep?: number; diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 5ec4d39420..7ab579f0b7 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -52,6 +52,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA src?: string; // v4.10.0 mask?: ReactNode; // v4.9.0 maskClassName?: string; // v4.11.0 + rootClassName?: string; // v5.4.0后支持 current?: number; // v4.12.0 仅支持 PreviewGroup countRender?: (current: number, total: number) => string // v4.20.0 仅支持 PreviewGroup scaleStep?: number;