diff --git a/components/space/Item.tsx b/components/space/Item.tsx
index 68864b1246..e4f89f91c8 100644
--- a/components/space/Item.tsx
+++ b/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 (
<>
-
+
{children}
{index < latestIndex && split && (
diff --git a/components/space/__tests__/index.test.tsx b/components/space/__tests__/index.test.tsx
index 22593a7201..de758e70ed 100644
--- a/components/space/__tests__/index.test.tsx
+++ b/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(
+
+ Text1
+ Text2
+ ,
+ );
+
+ expect(container.querySelector('.ant-space-item.test-classNames')).toBeTruthy();
+ });
+
+ it('should styles work', () => {
+ const { container } = render(
+
+ Text1
+ Text2
+ ,
+ );
+
+ expect(container.querySelector('.ant-space-item')?.getAttribute('style')).toEqual(
+ 'margin-right: 8px; color: red;',
+ );
+ });
});
diff --git a/components/space/index.en-US.md b/components/space/index.en-US.md
index 4841a3d877..00c26ed795 100644
--- a/components/space/index.en-US.md
+++ b/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
+
+
+| Property | Description | Version |
+| -------- | ------------------------- | ------- |
+| item | set `Space` child element | 5.6.0 |
+
## Design Token
diff --git a/components/space/index.tsx b/components/space/index.tsx
index d63551f64c..607641926c 100644
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@@ -29,6 +29,8 @@ export interface SpaceProps extends React.HTMLAttributes
{
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((props, ref) => {
split,
style,
wrap = false,
+ classNames: customClassNames,
+ styles,
...otherProps
} = props;
@@ -86,7 +90,7 @@ const Space = React.forwardRef((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((props, ref) => {
marginDirection={marginDirection}
split={split}
wrap={wrap}
+ style={styles?.item}
>
{child}
diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md
index c0640cd5a1..a525e27a94 100644
--- a/components/space/index.zh-CN.md
+++ b/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` 属性
+
+
+| 名称 | 说明 | 版本 |
+| ---- | --------------------- | ----- |
+| item | 设置 `Space` 包裹的子组件 | 5.6.0 |
+
## Design Token