Mantine 8.0 发布：现代化 React UI 组件库的重大更新

前言

Mantine 是一个基于 React 的现代化 UI 组件库，以其简洁的设计、丰富的功能和出色的可定制性而闻名。它提供了大量高质量的组件，帮助开发者快速构建美观且功能完善的 Web 应用程序。最新发布的 Mantine 8.0 版本带来了多项重要更新和改进，本文将详细介绍这些变化。

全局样式优化

Mantine 8.0 对全局样式进行了重构，将其拆分为三个独立的文件，以提高灵活性和可定制性：

1. baseline.css - 提供最基本的 CSS 重置，包括 box-sizing: border-box 设置和字体属性调整
2. default-css-variables.css - 包含基于默认主题生成的所有 CSS 变量
3. global.css - Mantine 组件使用的全局类

这种拆分允许开发者根据需要选择性地导入样式，而不是强制加载整个样式表。对于大多数项目，继续使用完整的 styles.css 仍然是最简单的方式。

增强的菜单组件

Mantine 8.0 为菜单组件添加了子菜单支持，使得构建复杂的导航结构变得更加简单。新的子菜单功能通过 <Menu.Sub> 组件实现，包含 <Menu.Sub.Target> 和 <Menu.Sub.Dropdown> 子组件，可以创建多级嵌套菜单。

弹窗组件改进

Popover 组件新增了 hideDetached 属性，用于控制当目标元素被隐藏或从 DOM 中移除时下拉框的行为。默认情况下，下拉框会随目标元素一起隐藏，但开发者可以通过设置 hideDetached={false} 来改变这一行为。

日期处理革新

Mantine 8.0 对日期相关组件进行了重大改进：

1. 所有日期组件现在使用 YYYY-MM-DD 或 YYYY-MM-DD HH:mm:ss 格式的字符串作为值，而不是 Date 对象，这解决了时区相关的问题
2. 移除了 DatesProvider 的 timezone 选项，开发者需要使用专门的日期库（如 dayjs、luxon 或 date-fns）来处理时区转换
3. 新增了 TimePicker 组件，提供比 TimeInput 更丰富的功能，支持 24 小时和 12 小时格式，以及下拉选择小时、分钟和秒

新增组件

Mantine 8.0 引入了几个新组件：

1. TimeValue - 用于显示格式化的时间字符串，支持与 TimePicker 相同的格式化选项
2. TimeGrid - 允许用户从预定义的时间槽中选择时间值
3. Heatmap - 以日历热图的形式展示数据，非常适合可视化活动或贡献数据

代码高亮改进

@mantine/code-highlight 包进行了重大重构：

1. 不再依赖 highlight.js，而是提供了基于适配器的新 API，支持使用任何语法高亮器
2. 内置支持 shiki 和 highlight.js 适配器
3. shiki 适配器特别适合需要高级 TypeScript 或 CSS/Sass 代码高亮的场景

轮播组件更新

@mantine/carousel 包更新至最新版本的 embla-carousel-react，带来以下变化：

1. 移除了 speed 和 draggable 属性
2. 需要显式安装 embla-carousel 和 embla-carousel-react 包
3. 移除了 useAnimationOffsetEffect 钩子
4. 之前的 embla 属性现在通过 emblaOptions 属性传递

其他改进

1. Switch 组件新增 withThumbIndicator 属性，可以自定义开关指示器的样式
2. 增强了主题类型扩展能力，现在可以扩展 spacing、radius、breakpoints 等类型
3. Kbd 组件新增 size 属性
4. ScrollArea 组件移除了强制 display: table 样式，并新增了 content Styles API 选择器
5. SegmentedControl 的默认高度值调整为与 Input 组件一致

总结

Mantine 8.0 是一个重要的版本更新，带来了许多新功能和改进，特别是在日期处理和代码高亮方面。这些变化使得 Mantine 更加灵活、强大，能够满足更广泛的开发需求。对于现有项目，建议参考官方迁移指南进行升级，以确保兼容性。

对于新项目，Mantine 8.0 提供了一个现代化、功能丰富的 UI 解决方案，能够显著提高开发效率和用户体验。特别是新增的 TimePicker 和 Heatmap 组件，为处理时间数据和可视化数据提供了更好的工具。