feat: ConfigProvider support Space classNames and styles properties (#42748)

* feat: config-provider support space classNames and styles

* fix: add className and style

* docs: update doc

* docs: update doc

* fix: fix override style

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

@@ -6,8 +6,9 @@ import mountTest from '../../../tests/shared/mountTest';
 import { fireEvent, render } from '../../../tests/utils';
 import Button from '../../button';
 import Input from '../../input';
-import Table from '../../table';
 import Select from '../../select';
+import Space from '../../space';
+import Table from '../../table';
 
 describe('ConfigProvider', () => {
   mountTest(() => (
@@ -123,4 +124,78 @@ describe('ConfigProvider', () => {
     expect(rendered).toBeTruthy();
     expect(cacheRenderEmpty).toBeFalsy();
   });
+
+  it('Should Space classNames works', () => {
+    const { container } = render(
+      <ConfigProvider
+        space={{
+          classNames: {
+            item: 'test-classNames',
+          },
+        }}
+      >
+        <Space>
+          <span>Text1</span>
+          <span>Text2</span>
+        </Space>
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-space-item.test-classNames')).toBeTruthy();
+  });
+
+  it('Should Space className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        space={{
+          className: 'test-classNames',
+        }}
+      >
+        <Space>
+          <span>Text1</span>
+          <span>Text2</span>
+        </Space>
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-space.test-classNames')).toBeTruthy();
+  });
+
+  it('Should Space styles works', () => {
+    const { container } = render(
+      <ConfigProvider
+        space={{
+          styles: {
+            item: {
+              color: 'red',
+            },
+          },
+        }}
+      >
+        <Space>
+          <span>Text1</span>
+          <span>Text2</span>
+        </Space>
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-space-item')?.getAttribute('style')).toEqual(
+      'margin-right: 8px; color: red;',
+    );
+  });
+
+  it('Should Space style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        space={{
+          style: {
+            color: 'red',
+          },
+        }}
+      >
+        <Space>
+          <span>Text1</span>
+          <span>Text2</span>
+        </Space>
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-space')?.getAttribute('style')).toEqual('color: red;');
+  });
 });

components/config-provider/context.ts

@@ -4,6 +4,7 @@ import type { Options } from 'scroll-into-view-if-needed';
 import type { ButtonProps } from '../button';
 import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale';
+import type { SpaceProps } from '../space';
 import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../theme/interface';
 import type { SizeType } from './SizeContext';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
@@ -68,6 +69,10 @@ export interface ConfigConsumerProps {
   direction?: DirectionType;
   space?: {
     size?: SizeType | number;
+    className?: SpaceProps['className'];
+    classNames?: SpaceProps['classNames'];
+    style?: SpaceProps['style'];
+    styles?: SpaceProps['styles'];
   };
   virtual?: boolean;
   popupMatchSelectWidth?: boolean;

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

@@ -67,7 +67,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | locale | Language package setting, you can find the packages in [antd/locale](http://unpkg.com/antd/locale/) | object | - |  |
 | prefixCls | Set prefix className | string | `ant` |  |
 | renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - |  |
-| space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
+| 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 |
 | theme | Set theme, ref [Customize Theme](/docs/react/customize-theme) | - | - | 5.0.0 |
 | virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 |
 

components/config-provider/index.tsx

@@ -14,6 +14,7 @@ import LocaleProvider, { ANT_MARK } from '../locale';
 import type { LocaleContextProps } from '../locale/context';
 import LocaleContext from '../locale/context';
 import defaultLocale from '../locale/en_US';
+import type { SpaceProps } from '../space';
 import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
 import type {
@@ -123,6 +124,10 @@ export interface ConfigProviderProps {
   direction?: DirectionType;
   space?: {
     size?: SizeType | number;
+    className?: SpaceProps['className'];
+    classNames?: SpaceProps['classNames'];
+    style?: SpaceProps['style'];
+    styles?: SpaceProps['styles'];
   };
   virtual?: boolean;
   /** @deprecated Please use `popupMatchSelectWidth` instead */

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

@@ -68,7 +68,7 @@ export default Demo;
 | locale | 语言包配置，语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - |  |
 | prefixCls | 设置统一样式前缀 | string | `ant` |  |
 | renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty-cn) | function(componentName: string): ReactNode | - |  |
-| space | 设置 Space 的 `size`，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
+| 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 |
 | theme | 设置主题，参考 [定制主题](/docs/react/customize-theme-cn) | - | - | 5.0.0 |
 | virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
 

components/space/index.tsx

@@ -86,11 +86,14 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
       [`${prefixCls}-rtl`]: directionConfig === 'rtl',
       [`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
     },
-    className,
+    className ?? space?.className,
     rootClassName,
   );
 
-  const itemClassName = classNames(`${prefixCls}-item`, customClassNames?.item);
+  const itemClassName = classNames(
+    `${prefixCls}-item`,
+    customClassNames?.item ?? space?.classNames?.item,
+  );
 
   const marginDirection = directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
 
@@ -112,7 +115,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
         marginDirection={marginDirection}
         split={split}
         wrap={wrap}
-        style={styles?.item}
+        style={styles?.item ?? space?.styles?.item}
       >
         {child}
       </Item>
@@ -151,6 +154,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
       className={cn}
       style={{
         ...gapStyle,
+        ...space?.style,
         ...style,
       }}
       {...otherProps}