React MD v6.0.0 发布：现代化组件库的重大升级

项目简介

React MD 是一个基于 React 的 Material Design 组件库，它提供了丰富的 UI 组件和工具，帮助开发者快速构建符合 Material Design 规范的应用界面。最新发布的 v6.0.0 版本是一次重大升级，包含了超过 1200 次提交，带来了诸多新特性、破坏性变更和错误修复。

核心亮点

1. 全新的 Box 组件

Box 组件是这次更新中最实用的新增组件之一，它围绕 CSS 盒模型设计，支持 display: flex 和 display: grid 布局。通过 Box 组件，开发者可以构建大部分 DOM 结构或布局，而无需编写自定义样式。

值得注意的是，随着 Box 组件的引入，原有的 Grid、GridCell、GridList 和 GridListCell 组件已被移除。开发者现在可以使用 Box 组件来实现类似的网格布局效果。

2. 图标系统升级

Material 图标系统得到了全面更新，现在支持最新的 Material 图标，但仅通过 SVG 图标实现。如果开发者需要继续使用字体图标，可以使用新的 MaterialIcon 组件或保留的 FontIcon 组件。

新增的 MaterialSymbol 组件支持自定义重量、等级和光学尺寸，这些设置可以全局应用、针对应用特定部分或单独配置。

3. 改进的 Autocomplete 组件

Autocomplete 组件经过了彻底重做，现在提供了更好的用户体验，行为更类似于可编辑的 Select 组件。新版本的主要改进包括：

• 默认要求选择有效选项，并会重置到最后有效的选项或空字符串
• 支持多值选择，可选择显示内联芯片或复选框
• 新增圆形进度条支持
• 现在可以分别控制选中的选项和输入值
• 更直观的组件 API 设计
• 更强的类型安全性

4. 增强的 Toast 和 Alert 系统

Toast 和 Alert 系统进行了更新，现在可以从任何地方显示 Toast，而不仅限于使用 useAddToast 钩子的 React 组件中。开发者现在可以通过导入新的 addToast 函数来创建 Toast。

其他新特性包括：

• 支持主题颜色
• 允许为每个 Toast 单独配置显示时间
• 当用户悬停在 Toast 上时，超时计时会暂停
• 支持同时显示多个 Toast
• 通过自定义 Toast 渲染器属性提供更多定制选项

5. 暗黑模式改进

暗黑模式得到了增强，现在在切换至暗黑主题时，默认会显示交互状态。按钮等原生元素也会根据暗黑模式色彩方案进行更新。

6. 简化的 Slider 组件

Slider 组件进行了简化，现在只需要 value 和 setValue 即可使用。由于这些变化，RangeSlider 组件不再需要，其功能已合并到 Slider 组件中。

此外，Slider 组件现在支持在下方显示标记，帮助用户在范围内定位特定值。

7. 其他组件改进

• Tooltip 现在支持仅在文本溢出时显示
• 新增 objectFit 实用函数，用于样式化图片、视频和其他媒体类型
• Tab 组件支持垂直渲染和保持一致的标签面板高度
• Tree 组件新增了扩展模式等自定义选项
• CircularProgress 和 LinearProgress 组件现在支持多种主题颜色

开发者体验提升

1. 样式工具和类名实用函数

大多数组件现在都提供了类名实用函数，允许开发者在不使用组件本身的情况下应用样式。命名约定使用 camelCase 而非 PascalCase。

此外，新增了 cssUtils 辅助工具，用于常见样式处理。

2. 测试工具改进

新增了与 Jest 和 Vitest 集成的 polyfills 和测试工具，改善了测试体验。

3. 新增组件和钩子

v6.0.0 引入了多个新组件和钩子，包括但不限于：

• AsyncButton
• CircularProgressSuspense
• ColorSchemeProvider
• ClickableCard
• ErrorBoundary
• HighlightText
• Mark
• Navigation
• NoSsr
• SegmentedButton
• SkeletonPlaceholder
• Slide
• StickyTableSection
• TooltippedButton
• WindowSplitter
• 以及多个实用钩子如 useAsyncFunction、useCSSVariables 等

文档与样式改进

1. 全新文档网站

文档网站进行了重新设计，改进包括：

• 导航基于组件、钩子或功能而非包
• 示例和演示更专注于单一功能
• 大多数示例和演示可以直接在网站内编辑和预览
• 代码编辑器主题可在全局设置菜单中配置

2. 样式系统优化

样式系统进行了重写，始终使用最低的 CSS 特异性，使自定义样式更容易覆盖 react-md 的默认样式。

3. 焦点样式改进

几乎所有组件的 :focus 样式现在使用 :focus-visible 而非依赖 .keyboard mode &:focus，移除了对这些样式的 UserInteractionModeProvider 要求。

性能与兼容性

1. ID 处理改进

所有需要 id 的 react-md 组件现在默认使用 useId()，可以省略 id 属性。

2. SSR 支持增强

通过在新的 CoreProviders 中启用 ssr 模式，临时组件（如对话框和覆盖层）在服务器端渲染后会保持可见和挂载状态，直到首次卸载。

3. StrictMode 兼容

修复了所有 StrictMode 错误，react-md 现已准备好支持 React 19。

4. Portal 改进

Portal 现在默认将所有内容渲染在 <div id="rmd-portal-container" /> 内，而非 document.body，便于开发者工具检查和防止在 document.body 中渲染额外节点可能出现的问题。

构建与打包优化

1. ESM 支持

react-md 现在仅支持 ESM，移除了对传统 @import Sass 语法的支持。

2. 模块导入优化

新的 @react-md/core 包支持从特定路径导入，而非根桶文件导入，提高了开发速度。

3. CSS 变量组织

自定义属性现在会在开发者工具中自动分组，便于检查。

4. 体积优化

gzipped 后的文件大小有所减小：

• JavaScript: 从 92.51 kB 降至 82.77 kB
• SCSS: 从 18.08 kB 降至 16.55 kB

升级建议

对于计划升级到 react-md v6 的开发者，建议仔细阅读迁移指南，了解所有破坏性变更和新的最佳实践。这次重大更新虽然包含许多破坏性变更，但也带来了显著的性能改进、更好的开发者体验和更丰富的功能集。