Card 组件在仅传入 extra 时样式异常

[suiyun39]

Reproduction link

Steps to reproduce

打开链接, 无需操作

What is expected?

卡片头部应该有一定的高度或边距

What is actually happening?

extra 插入的元素上下贴边

Environment	Info
antd	5.0.7
React	18
System	Windows 11
Browser	Microsoft Edge 108.0.1462.46

[JarvisArt]

试了下padding是需要title撑起

[JarvisArt]

对比了下v4中的extra也会有padding，v5是忘了加上样式还是设计如此？

[suiyun39]

@JarvisArt

这是 V5 的样式:

这是 V4 的样式:

简单的读了下 Card 的 style, 声明处存在两个 height token:

ant-design/components/card/style/index.tsx

Lines 9 to 21 in 1ce7d3a

	interface CardToken extends FullToken<'Card'> {
	cardHeaderHeight: number;
	cardHeaderHeightSM: number;
	cardShadow: string;
	cardHeadHeight: number;
	cardHeadPadding: number;
	cardPaddingSM: number;
	cardPaddingBase: number;
	cardHeadTabsMarginBottom: number;
	cardInnerHeadPadding: number;
	cardActionsLiMargin: string;
	cardActionsIconSize: number;
	}

在使用时使用的是 cardHeadHeight:

ant-design/components/card/style/index.tsx

Lines 36 to 38 in 1ce7d3a

	return {
	minHeight: cardHeadHeight,
	marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png

但是有值的 token 应该是 cardHeaderHeight:

ant-design/components/card/style/index.tsx

Lines 383 to 387 in 1ce7d3a

	const cardToken = mergeToken<CardToken>(token, {
	cardShadow: token.boxShadowCard,
	cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
	cardHeaderHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2,
	cardHeadPadding: token.padding,

[suiyun39]

追溯了一下, 两个 height token 声明分别来自 @MadCcc 和 @miracles1919