feat: Space support classNames and styles (#42743)

* feat: add styles and classNames properties

* Update components/space/index.en-US.md

Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>

* docs: fix prettier issue

---------

Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>

components/space/Item.tsx

@@ -9,6 +9,7 @@ export interface ItemProps {
   marginDirection: 'marginLeft' | 'marginRight';
   split?: React.ReactNode;
   wrap?: boolean;
+  style?: React.CSSProperties;
 }
 
 export default function Item({
@@ -19,6 +20,7 @@ export default function Item({
   children,
   split,
   wrap,
+  style: customStyle,
 }: ItemProps) {
   const { horizontalSize, verticalSize, latestIndex, supportFlexGap } =
     React.useContext(SpaceContext);
@@ -44,7 +46,7 @@ export default function Item({
 
   return (
     <>
-      <div className={className} style={style}>
+      <div className={className} style={{ ...style, ...customStyle }}>
         {children}
       </div>
       {index < latestIndex && split && (

components/space/__tests__/index.test.tsx

@@ -222,4 +222,34 @@ describe('Space', () => {
 
     expect(ref.current).toBe(container.firstChild);
   });
+
+  it('should classNames work', () => {
+    const { container } = render(
+      <Space classNames={{ item: 'test-classNames' }}>
+        <span>Text1</span>
+        <span>Text2</span>
+      </Space>,
+    );
+
+    expect(container.querySelector('.ant-space-item.test-classNames')).toBeTruthy();
+  });
+
+  it('should styles work', () => {
+    const { container } = render(
+      <Space
+        styles={{
+          item: {
+            color: 'red',
+          },
+        }}
+      >
+        <span>Text1</span>
+        <span>Text2</span>
+      </Space>,
+    );
+
+    expect(container.querySelector('.ant-space-item')?.getAttribute('style')).toEqual(
+      'margin-right: 8px; color: red;',
+    );
+  });
 });

components/space/index.en-US.md

@@ -64,6 +64,13 @@ Use Space.Compact when child form components are compactly connected and the bor
 | direction | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | 4.24.0 |
 | size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
 
+### `styles` and `classNames` attribute
+
+<!-- prettier-ignore -->
+| Property | Description | Version |
+| -------- | ------------------------- | ------- |
+| item     | set `Space` child element | 5.6.0   |
+
 ## Design Token
 
 <ComponentTokenTable component="Space"></ComponentTokenTable>

components/space/index.tsx

@@ -29,6 +29,8 @@ export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
   align?: 'start' | 'end' | 'center' | 'baseline';
   split?: React.ReactNode;
   wrap?: boolean;
+  classNames?: { item: string };
+  styles?: { item: React.CSSProperties };
 }
 
 const spaceSize = {
@@ -55,6 +57,8 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
     split,
     style,
     wrap = false,
+    classNames: customClassNames,
+    styles,
     ...otherProps
   } = props;
 
@@ -86,7 +90,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
     rootClassName,
   );
 
-  const itemClassName = `${prefixCls}-item`;
+  const itemClassName = classNames(`${prefixCls}-item`, customClassNames?.item);
 
   const marginDirection = directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
 
@@ -108,6 +112,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
         marginDirection={marginDirection}
         split={split}
         wrap={wrap}
+        style={styles?.item}
       >
         {child}
       </Item>

components/space/index.zh-CN.md

@@ -72,6 +72,13 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 | direction | 指定排列方向 | `vertical` \| `horizontal` | `horizontal` | 4.24.0 |
 | size | 子组件大小 | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
 
+### `styles` 和 `classNames` 属性
+
+<!-- prettier-ignore -->
+| 名称 | 说明  | 版本  |
+| ---- | --------------------- | ----- |
+| item | 设置 `Space` 包裹的子组件 | 5.6.0 |
+
 ## Design Token
 
 <ComponentTokenTable component="Space"></ComponentTokenTable>