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