Ant Design 6.5.1 是一次面向稳定性的补丁版本。更新没有引入大规模 API 变化,而是处理了两个容易影响企业应用体验的问题:AutoComplete 自定义输入组件在 filled 形态下的背景色重复叠加,以及多个组件在运行时启用响应式配置后无法继续感知断点变化。
两类问题为什么值得升级
表面上看,背景色叠加只是一个视觉瑕疵,但它可能破坏设计系统的一致性。企业应用通常会同时使用主题令牌、暗色模式、状态色和不同组件形态;如果 AutoComplete 与自定义 Input 都绘制 filled 背景,最终颜色可能比相邻表单项更深,在悬停、聚焦或禁用状态下也可能出现差异。
响应式问题的影响更偏向交互行为。本次发布修复了 Avatar、List、Pagination、Steps 和 Table 在动态启用响应式配置后无法响应断点变化的问题。这里的关键不是“页面首次加载是否正常”,而是组件挂载之后,应用通过状态、权限、配置中心或用户偏好打开响应式能力时,组件能否重新订阅并处理窗口断点。
这类场景常见于:
- 用户切换“紧凑布局”和“自适应布局”。
- 后台配置异步返回后才启用响应式属性。
- 同一个组件在抽屉、主内容区和分屏模式之间移动。
- 微前端子应用挂载后再接收宿主应用的布局配置。
用最小项目验证修复
来源摘要没有提供完整演示工程,可以这样实践:创建一个最小 React 应用,同时验证 filled 形态的自定义输入框和动态响应式 Avatar。运行前只需准备 Node.js,并确保项目依赖锁定到 antd@6.5.1。
npm create vite@latest antd-651-check -- --template react
cd antd-651-check
npm install
npm install antd@6.5.1
npm run dev
将 src/App.jsx 替换为下面的代码:
import { useState } from 'react';
import { AutoComplete, Avatar, Button, Input, Space, Typography } from 'antd';
import 'antd/dist/reset.css';
const options = [
{ value: 'Shanghai' },
{ value: 'Hangzhou' },
{ value: 'Shenzhen' },
];
export default function App() {
const [responsive, setResponsive] = useState(false);
const avatarSize = responsive
? { xs: 24, sm: 32, md: 40, lg: 48, xl: 56, xxl: 64 }
: 40;
return (
<main style={{ maxWidth: 720, margin: '48px auto', padding: 24 }}>
<Typography.Title level={2}>Ant Design 6.5.1 检查页</Typography.Title>
<Space direction="vertical" size="large" style={{ width: '100%' }}>
<section>
<Typography.Title level={4}>filled 自定义输入组件</Typography.Title>
<AutoComplete
options={options}
variant="filled"
style={{ width: 320 }}
placeholder="输入城市名称"
>
<Input aria-label="城市" />
</AutoComplete>
</section>
<section>
<Typography.Title level={4}>动态响应式 Avatar</Typography.Title>
<Space>
<Avatar size={avatarSize}>A</Avatar>
<Button onClick={() => setResponsive((value) => !value)}>
{responsive ? '关闭响应式尺寸' : '启用响应式尺寸'}
</Button>
</Space>
<Typography.Paragraph style={{ marginTop: 12 }}>
当前模式:{responsive ? '响应式' : '固定 40px'}
</Typography.Paragraph>
</section>
</Space>
</main>
);
}
打开页面后,可以按以下顺序检查:
- 观察
AutoComplete和内部自定义Input的 filled 背景是否保持单层、颜色是否与同形态表单控件一致。 - 点击“启用响应式尺寸”,确认属性是在组件挂载后动态改变,而不是通过刷新页面生效。
- 拖动浏览器宽度跨越多个断点,检查头像尺寸是否随断点变化。
- 再关闭并重新启用响应式尺寸,确认组件可以重复建立正确的响应式行为。
同样的方法可以扩展到 List、Pagination、Steps 和 Table:重点测试从普通配置切换为响应式配置的过程,而不只是测试首次渲染。
升级时不要只看页面能否打开
补丁版本通常可以直接升级,但企业项目仍应执行针对性回归。先在独立分支中更新并保留 lockfile 变化:
npm install antd@6.5.1 --save-exact
npm test
npm run build
如果项目封装了基础组件,还要检查封装层是否覆盖了 variant、size、responsive、grid 或表格列的断点配置。某些应用会在包装组件中缓存 props,导致上游已修复、业务页面却仍然无法动态更新。
视觉回归应覆盖亮色与暗色主题、默认与 filled 形态、聚焦和禁用状态。响应式回归则应覆盖“初始启用”“挂载后启用”“关闭后重新启用”三条路径,并在真实断点附近调整窗口宽度。
采用建议
正在使用自定义 AutoComplete 输入组件,或者会在运行时切换 Avatar、List、Pagination、Steps、Table 响应式配置的项目,应优先评估 6.5.1。升级前记录问题页面的截图和交互步骤,升级后用相同视口复测,能比泛化的全站浏览更快确认修复效果。
如果当前版本运行稳定且没有涉及这些场景,也应先完成构建、单元测试和关键页面视觉对比,再进入生产环境。补丁版本降低了升级成本,但主题覆盖、CSS-in-JS 注入顺序和业务封装仍可能放大局部样式变化。