feat: CP support Image className and style (#43074)

* feat: CP support Image className and style

* fix

* fix

* fix

* Update basic.tsx

* fix

* fix: remove useMemo

* update

* test: fix test case

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

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

---------

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
 import Divider from '../../divider';
+import Image from '../../image';
 import Segmented from '../../segmented';
 import Space from '../../space';
 import Spin from '../../spin';
@@ -163,4 +164,19 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('config-provider-steps');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Image className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        image={{ className: 'config-provider-image', style: { backgroundColor: 'red' } }}
+      >
+        <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+      </ConfigProvider>,
+    );
+    const element = container
+      ?.querySelector<HTMLDivElement>('.ant-image')
+      ?.querySelector<HTMLImageElement>('img');
+    expect(element).toHaveClass('config-provider-image');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -105,6 +105,10 @@ export interface ConfigConsumerProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  image?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -104,6 +104,7 @@ const {
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
+| image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
 | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | Set Select common props | { showSearch?: boolean } | - |  |

components/config-provider/index.tsx

@@ -154,6 +154,10 @@ export interface ConfigProviderProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  image?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -246,6 +250,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     typography,
     divider,
     steps,
+    image,
   } = props;
 
   // =================================== Warning ===================================
@@ -302,6 +307,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     typography,
     divider,
     steps,
+    image,
   };
 
   const config = {

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

@@ -106,6 +106,7 @@ const {
 | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
+| image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - |  |

components/image/index.tsx

@@ -2,9 +2,9 @@ import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import classNames from 'classnames';
 import RcImage, { type ImageProps } from 'rc-image';
 import * as React from 'react';
+import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
 import defaultLocale from '../locale/en_US';
-import { getTransitionName } from '../_util/motion';
 // CSSINJS
 import PreviewGroup, { icons } from './PreviewGroup';
 import useStyle from './style';
@@ -16,13 +16,16 @@ export interface CompositionImage<P> extends React.FC<P> {
 const Image: CompositionImage<ImageProps> = ({
   prefixCls: customizePrefixCls,
   preview,
+  className,
   rootClassName,
+  style,
   ...otherProps
 }) => {
   const {
     getPrefixCls,
     locale: contextLocale = defaultLocale,
     getPopupContainer: getContextPopupContainer,
+    image,
   } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('image', customizePrefixCls);
@@ -33,6 +36,9 @@ const Image: CompositionImage<ImageProps> = ({
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const mergedRootClassName = classNames(rootClassName, hashId);
+
+  const mergedClassName = classNames(className, hashId, image?.className);
+
   const mergedPreview = React.useMemo(() => {
     if (preview === false) {
       return preview;
@@ -54,11 +60,15 @@ const Image: CompositionImage<ImageProps> = ({
     };
   }, [preview, imageLocale]);
 
+  const mergedStyle: React.CSSProperties = { ...image?.style, ...style };
+
   return wrapSSR(
     <RcImage
       prefixCls={`${prefixCls}`}
       preview={mergedPreview}
       rootClassName={mergedRootClassName}
+      className={mergedClassName}
+      style={mergedStyle}
       {...otherProps}
     />,
   );