MUI X v6.11.0 新特性盘点Date Pickers 时区支持、Data Grid 表头过滤与剪贴板粘贴、Charts Alpha 及 Tree View 迁入 X【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本文以 MUI X v6.11.0 公告文档2023-08-14 发布为主体系统梳理该版本为 MUI X 带来的五类核心变化Date Pickers 的时区渲染与桌面端数字时钟、Data Grid Pro/Premium 的表头过滤与复制粘贴、全新 Charts 组件的 Alpha 亮相以及 Tree View 从mui/lab迁入 MUI X 的重大调整。读完你将掌握每一项特性的启用方式、关键 prop、适用场景与版本许可边界并能在自己的 MUI X 应用中直接落地验证。说明本公告文档归档于当前 material-ui 仓库的 docs/pages/blog 目录下配套演示素材位于 docs/public/static/blog/mui-x-mid-v6-features。公告所述功能的实现位于独立的 MUI X 产品仓库mui/x-date-pickers、mui/x-data-grid等本仓库可作为公告原文、相关迁移博客与 codemod 的权威参考。本文所有许可层级、功能默认值等表述均以该公告文档及仓库内可查证的配套资料为准。版本背景为什么值得立即升级公告开篇即点明立场自 MUI X 首个 v6 稳定版发布以来团队一直在持续滚动交付新的主要功能到达v6.11.0这个里程碑后有必要集中回顾这一轮最重要的新增能力并说明为什么应用方应当尽快取用最新版本。本仓库的公告 frontmatter 给出了本次发布的准确元数据字段值说明titleMUI X v6.11.0. A roundup of all new features公告主题descriptionSupport for time zones, Charts in alpha, Data Grid filtering, and more公告内容摘要date2023-08-14T00:00:00.000Z发布日期tagsMUI X、Product归类标签下面按 Date Pickers、Data Grid、Charts、Tree View 四条主线逐一展开。Date Pickers时区支持与数字时钟本轮 Date Pickersmui/x-date-pickers带来两项直接影响日常使用体验的能力跨时区渲染以及面向桌面端精度操作的数字时钟视图。按需时区渲染timezoneprop时区支持解决的是前端/后端时区不一致的经典痛点。公告的描述很直接在任意时区显示与选择日期时间不必再手写转换逻辑也不必再费心与后端保持一致性。用法非常克制——只需要在日期/时间组件上设置timezoneprop指定该 Date、Time 或 DateTime 组件应按哪个时区展示TimePicker value{value} onChange{setValue} timezonePacific/Honolulu // 可以设置为任意你想要的 IANA 时区标识 label{Rendered in Pacific/Honolulu} /围绕这段示例有几个从公告与工程实践出发可以补充确认的要点timezone使用的是IANA 时区标识符如Pacific/Honolulu、America/New_York、Asia/Tokyo值来自示例代码本身时区支持覆盖 Date、Time、DateTime 三类选择器组件value/onChange的受控用法与常规写法完全一致渲染层负责完成目标时区下的展示换算由于换算发生在 UI 层后端数据源无需为不同地区用户维护多套时间字符串这正对应公告强调的无需维护转换逻辑、与后端保持一致的收益。时区的实际应用能力还包括夏令时等边界场景的完整处理具体到更细粒度如自定义 dayjs/luxon/date-fns adapter、带时区 value 的读写规则的说明可进一步查阅 MUI X 官方时区使用指南公告中给出完整指引页面建议在官方文档检索 Timezone 主题继续深入。数字时钟Digital clock桌面端的时间精度方案数字时钟视图是对现有[模拟表盘时钟]的替代方案。从公告的演进说明可以还原其设计动机模拟时钟的原始提案主要面向移动端操作依赖表盘指针拖拽新的数字界面则为桌面体验设计目标是更高的时间选择精度直接按数字选择时与分无需在表盘上精确定位指针该视图同时作为Time Picker 与 Date Time Picker 在桌面端的默认变体出现可见团队是把精度与效率放在桌面场景的最高优先级。这次新增让 Date Pickers 在形态上更加完整移动端保持熟悉的拨盘/表盘交互桌面端获得更快速、更不易误触的数字列表兼顾了两类设备的操作习惯。Data Grid表头过滤与剪贴板复制粘贴本轮 Data Gridmui/x-data-grid的两项能力分别对应Pro与Premium两个许可层级且都聚焦提升批量数据操作效率这一主线。表头过滤Filter on column headers· Pro plan表头过滤让用户无需打开任何附加菜单即可快速过滤数据。启用方式是在 Data Grid 上开启unstable_headerFilterspropDataGridPro unstable_headerFilters disableColumnFilter // 可选隐藏默认的过滤面板 // ...其余列定义与数据 /从公告描述中可以得到如下可验证的行为细节启用后新的过滤输入框会显示在列头下方这些表头输入框与过滤面板filter panel保持双向同步——在表头输入与在面板配置的结果一致不会出现两套状态如果你偏好更简洁的界面可以配合disableColumnFilter停用默认过滤面板并将过滤收敛为只使用默认操作符即各列类型的默认过滤逻辑如文本包含、数值区间等。需要特别留意的是unstable_前缀。从 API 命名约定可以推断该 prop 在 v6.11.0 阶段仍属于尚未冻结语义的实验性能力接口细节可能在后续 minor 版本演进在上生产环境前应关注官方 Changelog 中的调整公告。复制与粘贴Copy and paste· Premium plan剪贴板互操作是 Excel 用户迁移到 Web Data Grid 时最常要求的体验之一。v6.11.0 通过一个实验性开关启用DataGridPremium experimentalFeatures{{ clipboardPaste: true }} processRowUpdate{(updatedRow, originalRow) { // 通过常规的编辑持久化流程写回你的数据源 return saveRow(updatedRow); }} onClipboardPasteStart{() { /* 粘贴开始时的自定义逻辑如记录日志、展示 loading */ }} onClipboardPasteEnd{() { /* 粘贴结束时的清理与刷新逻辑 */ }} // ... /按公告说明这一特性的数据交换范围非常广可以从其他字段/其他 Grid 复制也可以与任意的电子表格工具spreadsheet tool双向粘贴。有三个实现层面的关键设计值得注意与编辑 API 深度集成粘贴的数据会走既有的编辑校验与持久化管线——通过processRowUpdate写回数据源时你惯用的编辑验证流程必填校验、格式校验、后端同步会照常生效而不是绕过编辑体系直接改单元格生命周期回调粘贴过程会触发clipboardPasteStart与clipboardPasteEnd两个回调分别对应批量粘贴的开始与结束可用于围绕该事件做额外定制例如锁定工具条、批量提交、进度提示复制方向Grid → 外部与粘贴方向外部 → Grid由该实验性特性统一覆盖。对粘贴前后想监控状态变化、或需要在异步保存期间防止再次编辑的团队而言这两个回调是官方推荐的扩展锚点。ChartsAlpha 阶段的新组件套件公告另一则重磅消息是 MUI X 版图的全新扩张方向——面向图表构建与定制的组件套件。Charts 在 v6.11.0 处于alpha阶段支持的开箱即用图表类型包括折线图line charts柱状图/条形图bar charts饼图pie charts面积图area charts散点图scatter plots以及更多类型每类图表都强调了两点产品主张视觉细节经过精心打磨aesthetically pleasing同时能有效承载复杂数据的传达highly effective in conveying complex data并且内置由设计团队特制的配色板palettes。能力边界与演进节奏建议明确管理预期alpha 阶段意味着 API 与渲染细节仍可能变动官方在公告中明确承诺会在走向稳定版的过程中持续改善开发者与终端用户体验路线图上还有更多类型公告点名的方向包括Heatmap热力图、Funnel漏斗图、Gantt甘特图等社区的反馈需求投票、issue 报告会直接影响开发排期——如果某个具体图表类型是你的核心诉求可通过官方反馈渠道投票表达优先级。需要说明的是作为 alpha 功能图表组件存在功能缺口、个别渲染行为可能调整是在评估是否引入生产环境时必须考虑的前提。Tree View 迁入 MUI X从 lab 到 X 的迁移主线迁移决定与许可承诺公告确认 Tree View 正在从 mui/lablab 实验区迁移到MUI X并即将发布首个 Alpha。该组件以树形结构展示层级数据——典型形态是文件系统导航器文件夹/文件或导航列表。迁移理由在公告中给出得很务实Tree View 仍有大量值得构建的高级能力如checkbox 复选、拖拽drag drop、虚拟化virtualization而它通常不是设计系统的核心组件更适合放在需要全职工程维护的 MUI X 组件体系中。配套发布的 lab-tree-view-to-mui-x 迁移公告 进一步明确了许可边界已经 MIT 的保持 MIT——Tree View 现有及未来功能继续 MIT 免费可用商业计划Pro/Premium承载的才是虚拟化等更进阶能力。仓库内的迁移证据链在本仓库中可以找到这条迁移决策从计划走向落地的完整证据链lab 内的废弃占位TreeView.tsx 中的旧组件已变为仅打印迁移警告的占位组件其运行时警告文本明确写着组件已从mui/lab移至mui/x-tree-view并给出两种推荐 import 写法import { TreeView } from mui/x-tree-viewimport { TreeView } from mui/x-tree-view/TreeViewcodemod 自动化迁移仓库 packages/mui-codemod/src/v5.0.0/tree-view-moved-to-x.js及其测试 tree-view-moved-to-x.test.js专门负责把旧导入自动改写为mui/x-tree-view迁移文档与命令迁移指南给出的操作命令为npx mui/codemodlatest v5.0.0/tree-view-moved-to-x path对应的手工改写路径是更新包名 默认导出改具名导出-import TreeView from mui/lab/TreeView; -import TreeItem from mui/lab/TreeItem; import { TreeView } from mui/x-tree-view/TreeView; import { TreeItem } from mui/x-tree-view/TreeItem;或-import { TreeView, TreeItem } from mui/lab; import { TreeView, TreeItem } from mui/x-tree-view;对现存用户的影响迁移期对存量代码是平滑的mui/lab中的旧组件仍保留并打印弃用警告避免静默破坏新代码直接改用mui/x-tree-view存量代码可用 codemod 一键升级。从结构看lab 内TreeView/、TreeItem/组件目录依然存在于 packages/mui-lab/src承担过渡期的兼容职责。版本特性速查表为便于检索与决策将本公告涉及的全部能力汇总如下能力所属模块许可/层级启用方式关键状态时区渲染Date Pickers开放timezonePacific/Honolulu正式可用数字时钟Date Pickers开放桌面端 Time/DateTime Picker 默认变体正式可用表头过滤Data GridProunstable_headerFilters实验性 APIunstable_前缀过滤面板停用Data GridProdisableColumnFilter配合上项正式 prop剪贴板复制粘贴Data GridPremiumexperimentalFeatures{{ clipboardPaste: true }}实验性开关粘贴生命周期Data GridPremiumclipboardPasteStart/clipboardPasteEnd与编辑 API 联动Charts 套件MUI X规划中alpha新增组件套件alpha路线图含 Heatmap/Funnel/GanttTree ViewMUI XMIT迁移至mui/x-tree-viewAlpha 在即小结与反馈渠道MUI X v6.11.0 是一次典型的广度铺开型发布Date Pickers 在时区与桌面精度上补强了地基能力Data Grid 用表头过滤与剪贴板互操作把 Pro/Premium 的数据操作效率拉上一个台阶Charts 以 alpha 身份宣布了 MUI X 向可视化分析域的进军Tree View 迁移则明确了复杂层级组件在 X 生态中长期演进的归属与许可承诺。对于实际采纳的建议可以归纳为三句话需要跨时区展示日期时间就立刻使用timezoneprop需要批量数据操作时Pro 表头过滤与 Premium 剪贴板按许可层级各取所需Tree View 新项目直接使用mui/x-tree-view存量项目通过 codemod 迁移。图表套件则建议保持跟踪、在小范围试点后评估是否引入生产。特性使用中遇到问题可在 MUI X 官方 issue 区提交 bug 或参与功能讨论你的反馈会直接影响后续版本的优先级排布。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 MUI X v6.11.0 新特性盘点：Date Pickers 时区支持、Data Grid 表头过滤与剪贴板粘贴、Charts Alpha 及 Tree View 迁入 X
MUI X v6.11.0 新特性盘点Date Pickers 时区支持、Data Grid 表头过滤与剪贴板粘贴、Charts Alpha 及 Tree View 迁入 X【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本文以 MUI X v6.11.0 公告文档2023-08-14 发布为主体系统梳理该版本为 MUI X 带来的五类核心变化Date Pickers 的时区渲染与桌面端数字时钟、Data Grid Pro/Premium 的表头过滤与复制粘贴、全新 Charts 组件的 Alpha 亮相以及 Tree View 从mui/lab迁入 MUI X 的重大调整。读完你将掌握每一项特性的启用方式、关键 prop、适用场景与版本许可边界并能在自己的 MUI X 应用中直接落地验证。说明本公告文档归档于当前 material-ui 仓库的 docs/pages/blog 目录下配套演示素材位于 docs/public/static/blog/mui-x-mid-v6-features。公告所述功能的实现位于独立的 MUI X 产品仓库mui/x-date-pickers、mui/x-data-grid等本仓库可作为公告原文、相关迁移博客与 codemod 的权威参考。本文所有许可层级、功能默认值等表述均以该公告文档及仓库内可查证的配套资料为准。版本背景为什么值得立即升级公告开篇即点明立场自 MUI X 首个 v6 稳定版发布以来团队一直在持续滚动交付新的主要功能到达v6.11.0这个里程碑后有必要集中回顾这一轮最重要的新增能力并说明为什么应用方应当尽快取用最新版本。本仓库的公告 frontmatter 给出了本次发布的准确元数据字段值说明titleMUI X v6.11.0. A roundup of all new features公告主题descriptionSupport for time zones, Charts in alpha, Data Grid filtering, and more公告内容摘要date2023-08-14T00:00:00.000Z发布日期tagsMUI X、Product归类标签下面按 Date Pickers、Data Grid、Charts、Tree View 四条主线逐一展开。Date Pickers时区支持与数字时钟本轮 Date Pickersmui/x-date-pickers带来两项直接影响日常使用体验的能力跨时区渲染以及面向桌面端精度操作的数字时钟视图。按需时区渲染timezoneprop时区支持解决的是前端/后端时区不一致的经典痛点。公告的描述很直接在任意时区显示与选择日期时间不必再手写转换逻辑也不必再费心与后端保持一致性。用法非常克制——只需要在日期/时间组件上设置timezoneprop指定该 Date、Time 或 DateTime 组件应按哪个时区展示TimePicker value{value} onChange{setValue} timezonePacific/Honolulu // 可以设置为任意你想要的 IANA 时区标识 label{Rendered in Pacific/Honolulu} /围绕这段示例有几个从公告与工程实践出发可以补充确认的要点timezone使用的是IANA 时区标识符如Pacific/Honolulu、America/New_York、Asia/Tokyo值来自示例代码本身时区支持覆盖 Date、Time、DateTime 三类选择器组件value/onChange的受控用法与常规写法完全一致渲染层负责完成目标时区下的展示换算由于换算发生在 UI 层后端数据源无需为不同地区用户维护多套时间字符串这正对应公告强调的无需维护转换逻辑、与后端保持一致的收益。时区的实际应用能力还包括夏令时等边界场景的完整处理具体到更细粒度如自定义 dayjs/luxon/date-fns adapter、带时区 value 的读写规则的说明可进一步查阅 MUI X 官方时区使用指南公告中给出完整指引页面建议在官方文档检索 Timezone 主题继续深入。数字时钟Digital clock桌面端的时间精度方案数字时钟视图是对现有[模拟表盘时钟]的替代方案。从公告的演进说明可以还原其设计动机模拟时钟的原始提案主要面向移动端操作依赖表盘指针拖拽新的数字界面则为桌面体验设计目标是更高的时间选择精度直接按数字选择时与分无需在表盘上精确定位指针该视图同时作为Time Picker 与 Date Time Picker 在桌面端的默认变体出现可见团队是把精度与效率放在桌面场景的最高优先级。这次新增让 Date Pickers 在形态上更加完整移动端保持熟悉的拨盘/表盘交互桌面端获得更快速、更不易误触的数字列表兼顾了两类设备的操作习惯。Data Grid表头过滤与剪贴板复制粘贴本轮 Data Gridmui/x-data-grid的两项能力分别对应Pro与Premium两个许可层级且都聚焦提升批量数据操作效率这一主线。表头过滤Filter on column headers· Pro plan表头过滤让用户无需打开任何附加菜单即可快速过滤数据。启用方式是在 Data Grid 上开启unstable_headerFilterspropDataGridPro unstable_headerFilters disableColumnFilter // 可选隐藏默认的过滤面板 // ...其余列定义与数据 /从公告描述中可以得到如下可验证的行为细节启用后新的过滤输入框会显示在列头下方这些表头输入框与过滤面板filter panel保持双向同步——在表头输入与在面板配置的结果一致不会出现两套状态如果你偏好更简洁的界面可以配合disableColumnFilter停用默认过滤面板并将过滤收敛为只使用默认操作符即各列类型的默认过滤逻辑如文本包含、数值区间等。需要特别留意的是unstable_前缀。从 API 命名约定可以推断该 prop 在 v6.11.0 阶段仍属于尚未冻结语义的实验性能力接口细节可能在后续 minor 版本演进在上生产环境前应关注官方 Changelog 中的调整公告。复制与粘贴Copy and paste· Premium plan剪贴板互操作是 Excel 用户迁移到 Web Data Grid 时最常要求的体验之一。v6.11.0 通过一个实验性开关启用DataGridPremium experimentalFeatures{{ clipboardPaste: true }} processRowUpdate{(updatedRow, originalRow) { // 通过常规的编辑持久化流程写回你的数据源 return saveRow(updatedRow); }} onClipboardPasteStart{() { /* 粘贴开始时的自定义逻辑如记录日志、展示 loading */ }} onClipboardPasteEnd{() { /* 粘贴结束时的清理与刷新逻辑 */ }} // ... /按公告说明这一特性的数据交换范围非常广可以从其他字段/其他 Grid 复制也可以与任意的电子表格工具spreadsheet tool双向粘贴。有三个实现层面的关键设计值得注意与编辑 API 深度集成粘贴的数据会走既有的编辑校验与持久化管线——通过processRowUpdate写回数据源时你惯用的编辑验证流程必填校验、格式校验、后端同步会照常生效而不是绕过编辑体系直接改单元格生命周期回调粘贴过程会触发clipboardPasteStart与clipboardPasteEnd两个回调分别对应批量粘贴的开始与结束可用于围绕该事件做额外定制例如锁定工具条、批量提交、进度提示复制方向Grid → 外部与粘贴方向外部 → Grid由该实验性特性统一覆盖。对粘贴前后想监控状态变化、或需要在异步保存期间防止再次编辑的团队而言这两个回调是官方推荐的扩展锚点。ChartsAlpha 阶段的新组件套件公告另一则重磅消息是 MUI X 版图的全新扩张方向——面向图表构建与定制的组件套件。Charts 在 v6.11.0 处于alpha阶段支持的开箱即用图表类型包括折线图line charts柱状图/条形图bar charts饼图pie charts面积图area charts散点图scatter plots以及更多类型每类图表都强调了两点产品主张视觉细节经过精心打磨aesthetically pleasing同时能有效承载复杂数据的传达highly effective in conveying complex data并且内置由设计团队特制的配色板palettes。能力边界与演进节奏建议明确管理预期alpha 阶段意味着 API 与渲染细节仍可能变动官方在公告中明确承诺会在走向稳定版的过程中持续改善开发者与终端用户体验路线图上还有更多类型公告点名的方向包括Heatmap热力图、Funnel漏斗图、Gantt甘特图等社区的反馈需求投票、issue 报告会直接影响开发排期——如果某个具体图表类型是你的核心诉求可通过官方反馈渠道投票表达优先级。需要说明的是作为 alpha 功能图表组件存在功能缺口、个别渲染行为可能调整是在评估是否引入生产环境时必须考虑的前提。Tree View 迁入 MUI X从 lab 到 X 的迁移主线迁移决定与许可承诺公告确认 Tree View 正在从 mui/lablab 实验区迁移到MUI X并即将发布首个 Alpha。该组件以树形结构展示层级数据——典型形态是文件系统导航器文件夹/文件或导航列表。迁移理由在公告中给出得很务实Tree View 仍有大量值得构建的高级能力如checkbox 复选、拖拽drag drop、虚拟化virtualization而它通常不是设计系统的核心组件更适合放在需要全职工程维护的 MUI X 组件体系中。配套发布的 lab-tree-view-to-mui-x 迁移公告 进一步明确了许可边界已经 MIT 的保持 MIT——Tree View 现有及未来功能继续 MIT 免费可用商业计划Pro/Premium承载的才是虚拟化等更进阶能力。仓库内的迁移证据链在本仓库中可以找到这条迁移决策从计划走向落地的完整证据链lab 内的废弃占位TreeView.tsx 中的旧组件已变为仅打印迁移警告的占位组件其运行时警告文本明确写着组件已从mui/lab移至mui/x-tree-view并给出两种推荐 import 写法import { TreeView } from mui/x-tree-viewimport { TreeView } from mui/x-tree-view/TreeViewcodemod 自动化迁移仓库 packages/mui-codemod/src/v5.0.0/tree-view-moved-to-x.js及其测试 tree-view-moved-to-x.test.js专门负责把旧导入自动改写为mui/x-tree-view迁移文档与命令迁移指南给出的操作命令为npx mui/codemodlatest v5.0.0/tree-view-moved-to-x path对应的手工改写路径是更新包名 默认导出改具名导出-import TreeView from mui/lab/TreeView; -import TreeItem from mui/lab/TreeItem; import { TreeView } from mui/x-tree-view/TreeView; import { TreeItem } from mui/x-tree-view/TreeItem;或-import { TreeView, TreeItem } from mui/lab; import { TreeView, TreeItem } from mui/x-tree-view;对现存用户的影响迁移期对存量代码是平滑的mui/lab中的旧组件仍保留并打印弃用警告避免静默破坏新代码直接改用mui/x-tree-view存量代码可用 codemod 一键升级。从结构看lab 内TreeView/、TreeItem/组件目录依然存在于 packages/mui-lab/src承担过渡期的兼容职责。版本特性速查表为便于检索与决策将本公告涉及的全部能力汇总如下能力所属模块许可/层级启用方式关键状态时区渲染Date Pickers开放timezonePacific/Honolulu正式可用数字时钟Date Pickers开放桌面端 Time/DateTime Picker 默认变体正式可用表头过滤Data GridProunstable_headerFilters实验性 APIunstable_前缀过滤面板停用Data GridProdisableColumnFilter配合上项正式 prop剪贴板复制粘贴Data GridPremiumexperimentalFeatures{{ clipboardPaste: true }}实验性开关粘贴生命周期Data GridPremiumclipboardPasteStart/clipboardPasteEnd与编辑 API 联动Charts 套件MUI X规划中alpha新增组件套件alpha路线图含 Heatmap/Funnel/GanttTree ViewMUI XMIT迁移至mui/x-tree-viewAlpha 在即小结与反馈渠道MUI X v6.11.0 是一次典型的广度铺开型发布Date Pickers 在时区与桌面精度上补强了地基能力Data Grid 用表头过滤与剪贴板互操作把 Pro/Premium 的数据操作效率拉上一个台阶Charts 以 alpha 身份宣布了 MUI X 向可视化分析域的进军Tree View 迁移则明确了复杂层级组件在 X 生态中长期演进的归属与许可承诺。对于实际采纳的建议可以归纳为三句话需要跨时区展示日期时间就立刻使用timezoneprop需要批量数据操作时Pro 表头过滤与 Premium 剪贴板按许可层级各取所需Tree View 新项目直接使用mui/x-tree-view存量项目通过 codemod 迁移。图表套件则建议保持跟踪、在小范围试点后评估是否引入生产。特性使用中遇到问题可在 MUI X 官方 issue 区提交 bug 或参与功能讨论你的反馈会直接影响后续版本的优先级排布。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考