Material UI v6.4.0 版本发布:按钮加载状态与组件优化
Material UI 是一个流行的 React UI 组件库,它实现了 Google 的 Material Design 设计规范,为开发者提供了一套美观、易用且高度可定制的界面组件。最新发布的 v6.4.0 版本带来了一系列实用功能和改进,特别是新增了按钮组件的加载状态支持,进一步提升了开发体验。
核心功能更新
按钮组件新增加载状态
本次更新最引人注目的特性是为 Button 和 IconButton 组件新增了 loading 属性。这个功能解决了开发中常见的需求:在按钮触发异步操作时显示加载状态,防止用户重复点击并提升交互体验。
当设置 loading={true} 时,按钮会自动显示一个旋转的加载指示器,并禁用按钮的点击功能。这个特性简化了以往需要手动管理加载状态和禁用状态的开发流程,使代码更加简洁。
进度指示器改进
CircularProgress 组件的不确定(indeterminate)动画得到了优化,现在动画更加平滑对称。同时,LinearProgress 组件的组合类(composed classes)被标记为已弃用,开发者应使用新的 API 替代。
表单组件增强
Autocomplete 组件修复了分组选项中键(key)的类型同步问题,确保了运行时和 TypeScript 类型定义的一致性。Select 组件也进行了两项改进:关闭时不再设置 aria-controls 属性,并修复了缺失的根类(root class)问题。
组件 API 完善
Material UI 团队继续致力于完善组件的 API 设计:
Alert组件现在完全支持slots和slotProps属性,提供了更灵活的定制能力CardHeader组件的*TypographyProps被标记为已弃用,同时完整实现了slots和slotProps- 新增了
mergeSlotProps工具函数,用于更便捷地扩展组件功能,该函数现在也能正确处理style属性的合并 - 修复了
Tooltip和StepLabel组件的插槽(slots)类型定义
样式与可访问性修复
Link组件修复了在使用自定义调色板(palette)时下划线显示错误的问题Slider组件确保onChangeCommitted回调能接收到传递给onChange的最后一个参数- 多项可访问性相关的改进,如
Select组件的 ARIA 属性优化
文档与示例更新
文档团队进行了多项改进:
- 修复了仪表板侧边栏滚动问题
- 移除了所有 Adobe XD 相关的引用和示例
- 增加了关于补充菜单组件的详细说明
- 修正了排版文档中的错误渲染示例
- 更新了 CDN 示例以支持 React 19
内部架构优化
开发团队在基础设施方面也做了多项改进:
- 移除了回归测试和端到端测试中的 Suspense 和时钟模拟
- 允许在
@mui/internal-test-utils中使用 React 18 - 稳定了 pigment 进度条测试的稳定性
- 明确了 Figma 的 Material UI Sync 插件仍处于实验阶段
Material UI v6.4.0 版本虽然是一个小版本更新,但带来了多项实用功能和改进,特别是按钮加载状态的支持将显著提升开发效率。团队持续关注组件 API 的完善和一致性问题,同时不断优化文档和测试基础设施,为开发者提供更稳定可靠的工具链。