feat: CP support Table className and style (#43301)

* feat: CP support Table className and style

* test: update test case

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

@@ -26,6 +26,7 @@ import Space from '../../space';
 import Spin from '../../spin';
 import Steps from '../../steps';
 import Switch from '../../switch';
+import Table from '../../table';
 import Tag from '../../tag';
 import Typography from '../../typography';
 
@@ -617,4 +618,15 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-tag');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
+
+  it('Should Table className & style works', () => {
+    const { container } = render(
+      <ConfigProvider table={{ className: 'cp-table', style: { backgroundColor: 'blue' } }}>
+        <Table dataSource={[]} />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-table-wrapper');
+    expect(element).toHaveClass('cp-table');
+    expect(element).toHaveStyle({ backgroundColor: 'blue' });
+  });
 });

components/config-provider/context.ts

@@ -117,6 +117,7 @@ export interface ConfigConsumerProps {
   rate?: ComponentStyleConfig;
   switch?: ComponentStyleConfig;
   tag?: ComponentStyleConfig;
+  table?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -127,6 +127,7 @@ const {
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 

components/config-provider/index.tsx

@@ -161,6 +161,7 @@ export interface ConfigProviderProps {
   rate?: ComponentStyleConfig;
   switch?: ComponentStyleConfig;
   tag?: ComponentStyleConfig;
+  table?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -274,6 +275,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     rate,
     switch: SWITCH,
     tag,
+    table,
   } = props;
 
   // =================================== Warning ===================================
@@ -349,6 +351,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     rate,
     switch: SWITCH,
     tag,
+    table,
   };
 
   const config = {

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

@@ -129,6 +129,7 @@ const {
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 

components/table/InternalTable.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type TableProps as RcTableProps, INTERNAL_HOOKS } from 'rc-table';
+import { INTERNAL_HOOKS, type TableProps as RcTableProps } from 'rc-table';
 import { convertChildrenToColumns } from 'rc-table/lib/hooks/useColumns';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
@@ -175,6 +175,7 @@ const InternalTable = <RecordType extends AnyObject = any>(
   const {
     locale: contextLocale = defaultLocale,
     direction,
+    table,
     renderEmpty,
     getPrefixCls,
     getPopupContainer: getContextPopupContainer,
@@ -516,6 +517,7 @@ const InternalTable = <RecordType extends AnyObject = any>(
 
   const wrapperClassNames = classNames(
     `${prefixCls}-wrapper`,
+    table?.className,
     {
       [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
     },
@@ -524,12 +526,14 @@ const InternalTable = <RecordType extends AnyObject = any>(
     hashId,
   );
 
+  const mergedStyle: React.CSSProperties = { ...table?.style, ...style };
+
   const emptyText = (locale && locale.emptyText) || renderEmpty?.('Table') || (
     <DefaultRenderEmpty componentName="Table" />
   );
 
   return wrapSSR(
-    <div ref={ref} className={wrapperClassNames} style={style}>
+    <div ref={ref} className={wrapperClassNames} style={mergedStyle}>
       <Spin spinning={false} {...spinProps}>
         {topPaginationNode}
         <RcTable<RecordType>