6.4.4 是一个小版本,但修的两个 Descriptions bug 在实际项目里踩过的人不少——嵌套 Table 时宽度莫名撑到屏幕外、响应式 column 传对象后列数表现和预期不一致。加上 Radio.Group button 方向的修正,这次更新值得顺手升一下。
Descriptions 嵌套 Table,宽度不再失控
在详情页里用 Descriptions 包一层 Table 展示子列表,是常见做法。但之前版本存在一个问题:Table 的 width: 100% 或列宽总和会撑破 Descriptions 的单元格边界,导致整个描述列表横向溢出,尤其在窄屏或侧边弹窗里非常明显。
6.4.4 修复了内部对嵌套表格宽度的约束逻辑,Table 现在会正确地被限制在 Descriptions 分配的单元格空间内。
下面是一个典型的嵌套场景,升级后不再需要手动加 overflow: hidden 或硬设 maxWidth:
import { Descriptions, Table } from 'antd';
const orderItems = [
{ key: '1', name: '机械键盘', qty: 2, price: 599 },
{ key: '2', name: '显示器支架', qty: 1, price: 189 },
];
function OrderDetail() {
return (
<Descriptions title="订单详情" bordered column={2}>
<Descriptions.Item label="订单号">ORD-20250618-001</Descriptions.Item>
<Descriptions.Item label="状态">已发货</Descriptions.Item>
<Descriptions.Item label="商品列表" span={2}>
{/* 升级 6.4.4 后,Table 不会再撑破 Descriptions 宽度 */}
<Table
size="small"
pagination={false}
dataSource={orderItems}
columns={[
{ title: '名称', dataIndex: 'name' },
{ title: '数量', dataIndex: 'qty' },
{ title: '单价', dataIndex: 'price' },
]}
/>
</Descriptions.Item>
</Descriptions>
);
}
升级前,如果弹窗宽度只有 480px,上面的 Table 很可能直接把整个 Descriptions 撑到 600px+,右侧内容被截断。升级后 Table 自动适配单元格宽度。
响应式 column 传对象,行为回归预期
Descriptions 支持响应式 column——传一个对象如 { xxl: 4, xl: 3, md: 2, sm: 1 },组件会根据视口宽度自动切换列数。但之前版本在部分断点下计算有偏差:比如视口明明处于 md 范围,却仍然按 xl 的 3 列渲染,导致窄屏下标签和值挤在一行。
6.4.4 修正了断点匹配逻辑,现在传对象时每个断点都能正确生效。
import { Descriptions } from 'antd';
function ResponsiveDetail() {
return (
<Descriptions
title="设备信息"
bordered
// 修复后,每个断点都会正确匹配
column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}
>
<Descriptions.Item label="型号">MacBook Pro 16</Descriptions.Item>
<Descriptions.Item label="芯片">M4 Pro</Descriptions.Item>
<Descriptions.Item label="内存">24 GB</Descriptions.Item>
<Descriptions.Item label="存储">512 GB SSD</Descriptions.Item>
</Descriptions>
);
}
如果你之前因为响应式不生效而被迫用 useBreakpoint 手动切换,现在可以回到对象配置方式,代码更简洁。
Radio.Group button 方向修正
本次还修复了 Radio.Group 在 button 样式下的一个渲染问题(issue 编号被截断,但属于按钮方向/排列相关的修正)。如果你用了 Radio.Group 的 buttonStyle="solid" 或自定义方向,升级后排列表现会更稳定。
升级建议
6.4.4 是纯 bugfix 版本,无 API 变更、无破坏性改动,升级风险极低:
# npm
npm install antd@6.4.4
# yarn
yarn add antd@6.4.4
# pnpm
pnpm add antd@6.4.4
升级后检查清单:
- 搜索项目里
Descriptions嵌套Table的地方,移除之前为防溢出手动加的style={{ overflow: 'hidden' }}或maxWidthhack,验证宽度是否自然收敛。 - 搜索
column={{ ... }}对象配置的Descriptions,在窄屏下确认列数是否按预期切换。 - 检查
Radio.Group button样式的排列是否正常。
如果以上场景都没用到,升级只是多一份保险,不会影响现有行为。