feat: config-provider support transfer className and style properties (#43063)

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

@@ -38,6 +38,7 @@ import Switch from '../../switch';
 import Table from '../../table';
 import Tabs from '../../tabs';
 import Tag from '../../tag';
+import Transfer from '../../transfer';
 import Tree from '../../tree';
 import Typography from '../../typography';
 import Upload from '../../upload';
@@ -852,6 +853,52 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ color: 'blue' });
   });
 
+  it('Should Transfer className works', () => {
+    const mockData = [
+      {
+        key: '0-0',
+        title: `content`,
+        description: `description of content`,
+      },
+    ];
+
+    const { container } = render(
+      <ConfigProvider
+        transfer={{
+          className: 'test-class',
+        }}
+      >
+        <Transfer dataSource={mockData} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-transfer')).toHaveClass('test-class');
+  });
+
+  it('Should Transfer style works', () => {
+    const mockData = [
+      {
+        key: '0-0',
+        title: `content`,
+        description: `description of content`,
+      },
+    ];
+
+    const { container } = render(
+      <ConfigProvider
+        transfer={{
+          style: {
+            color: 'red',
+          },
+        }}
+      >
+        <Transfer dataSource={mockData} style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-transfer')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Tree className works', () => {
     const treeData = [
       {

components/config-provider/context.ts

@@ -120,6 +120,7 @@ export interface ConfigConsumerProps {
   radio?: ComponentStyleConfig;
   rate?: ComponentStyleConfig;
   switch?: ComponentStyleConfig;
+  transfer?: ComponentStyleConfig;
   avatar?: ComponentStyleConfig;
   message?: ComponentStyleConfig;
   tag?: ComponentStyleConfig;

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

@@ -139,6 +139,7 @@ const {
 | table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | upload | Set Upload common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -164,6 +164,7 @@ export interface ConfigProviderProps {
   radio?: ComponentStyleConfig;
   rate?: ComponentStyleConfig;
   switch?: ComponentStyleConfig;
+  transfer?: ComponentStyleConfig;
   avatar?: ComponentStyleConfig;
   message?: ComponentStyleConfig;
   tag?: ComponentStyleConfig;
@@ -290,6 +291,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     radio,
     rate,
     switch: SWITCH,
+    transfer,
     avatar,
     message,
     tag,
@@ -378,6 +380,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     radio,
     rate,
     switch: SWITCH,
+    transfer,
     avatar,
     message,
     tag,

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

@@ -142,6 +142,7 @@ const {
 | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 

components/transfer/index.tsx

@@ -143,6 +143,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     getPrefixCls,
     renderEmpty,
     direction: dir,
+    transfer,
   } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('transfer', customizePrefixCls);
 
@@ -336,6 +337,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
       [`${prefixCls}-rtl`]: dir === 'rtl',
     },
     getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
+    transfer?.className,
     className,
     rootClassName,
     hashId,
@@ -348,7 +350,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
   const [leftTitle, rightTitle] = getTitles(listLocale);
 
   return wrapSSR(
-    <div className={cls} style={style}>
+    <div className={cls} style={{ ...transfer?.style, ...style }}>
       <List<KeyWise<RecordType>>
         prefixCls={`${prefixCls}-list`}
         titleText={leftTitle}