MUI X v6 发布

MUI X v6.0.0 终于发布了，带来了许多改进、新功能、自定义能力，以及更强大的基础，以适应我们接下来想要交付的变更。

目录

• Data Grid - 功能亮点 ✨
  • ApiRef 移至 MIT（社区版）版本
  • 改进的列菜单
  • 行固定现已稳定
  • 聚合现已稳定
  • 单元格选择
  • 使用 Web Workers 将数据导出到 Excel 文件
• Date and Time Pickers - 功能亮点 ✨
  • Fields: Pickers 的新默认 <input>
  • 改进的布局自定义
  • 文档全面修订
  • 移除桌面 Time Pickers 上的时钟视图
  • 用于在日历中选择特定日期的快捷方式
  • 通过拖放编辑日期范围
• 安装和迁移
• 下一步是什么？
• 版本与 MUI Core 解耦
• 反馈

Data Grid - 功能亮点 ✨

ApiRef 移至 MIT（社区版）版本

通过 Data Grid 的 API 对象管理分页、滚动、状态和其他属性——以前仅在商业计划中提供，现在所有用户均可使用。apiRef 使开发人员能够实现一系列全新的自定义，这些自定义依赖于对 Grid 功能的程序化控制。

function CustomDataGrid(props) {
  const apiRef = useGridApiRef();

  return (
    <div>
      <Button onClick={() => apiRef.current.setPage(0)}>
        Go to page first page
      </Button>
      <DataGrid apiRef={apiRef} {...other} />
    </div>
  );
}

有关更多详细信息，请参阅 apiRef 参考文档。

这是我们首次将 Pro 计划中的功能转移到 MIT 许可。我们意识到 Pro 计划中的此功能与我们的目标背道而驰。我们的目标是使 MUI X data grid 成为 React 开发人员的最佳网格，与其他独立的开源网格相比。为此，开发人员需要访问自定义它所需的所有原语。

如果您想更深入地了解我们对开源/商业平衡的看法，请查看我们的 Stewardship 页面。

改进的列菜单

在自定义和可用性方面又迈出了重要一步；v6 列菜单 现在提供对图标、菜单组、自定义项目和操作等的支持。我们重新设计了这个子组件，使其尽可能地可扩展。

打开时以及悬停在某个项目上时的列菜单演示。

此改进是 v6 生命周期中全面改进所有 Data Grid 面板的一部分。

行固定现已稳定

行固定 之前在 v5 版本的次要版本中以 experimentalFeatures={{ rowPinning: true }} 标志发布。由于社区的试用和错误报告，API 现在已稳定。

聚合现已稳定

聚合 之前在 v5 版本的次要版本中以 experimentalFeatures={{ aggregation: true }} 标志发布。由于社区的试用和错误报告，API 现在已稳定。

第二列的页脚是其所有单元格的总和。

单元格选择

单元格选择 是一种在 Data Grid 中选择数据的强大而灵活的方式。它允许最终用户像在 Excel 表格中一样选择一个单元格或一组单元格。

单元格选择的演示。

此功能将作为剪贴板导入/批量编辑的基础（即将推出）。API 在此第一个版本中不稳定，但您可以使用以下代码启用它

<DataGridPremium unstable_cellSelection />

使用 Web Workers 将数据导出到 Excel 文件

默认情况下，Excel 文件导出在主线程中生成。当导出大型数据集时，这可能会冻结 UI。

您现在可以使用 Web Worker 在后台运行，以便在导出数据时与网格进行交互。

Date and Time Pickers - 功能亮点 ✨

Fields: Pickers 的新默认 <input>

旧版掩码输入

在 MUI X v5 中，pickers 组件的 <input> 行为是通过 掩码方法 实现的。这有很多 UX 缺点。例如，请注意当我们在此掩码输入上编辑日期时会发生什么，您会丢失年份

MUI X v5 上的日期选择器演示。

新的“Fields”

此掩码逻辑现已消失。“Fields” 实现了新的富文本字段，解决了掩码输入的限制。它们专门用于日期和时间逻辑，并在日期值的每个部分中提供快速导航和隔离交互。观看实际效果

此设计深受 macOS 和 Windows 等平台在 Web 上提供的 原生日期选择器 UI 的启发。

生日选择器

直到 MUI X v5，我们一直建议使用 3 个单独的输入来实现生日选择器，尤其不建议使用 <DatePicker>；有关原因，请参阅这篇文章：设计生日选择器 UX：越简单越好。

得益于 Fields，生日选择器现在可以拥有出色的 UX。它们的行为几乎类似于 3 个单独的输入，并支持完整的字母月份，可用于避免最终用户混淆日期和月份。

独立

Fields 包含在所有 pickers 中，但它们也可以作为 <TextField> 的独立改进版本提供

import { DateField } from '@mui/x-date-pickers/DateField';

<DateField label="My first field" />;

改进的布局自定义

将插槽概念与网格布局相结合，您现在可以重新排列、扩展和自定义 Pickers UI 中使用的大多数子组件。请参阅 有关它的文档 和此快速概览

function MyCustomLayout(props) {
  const { toolbar, tabs, content, actionBar } = usePickerLayout(props);

  return (
    <PickersLayoutRoot className={pickersLayout.root} ownerState={props}>
      {toolbar}
      {actionBar}
      <PickersLayoutContentWrapper className={pickersLayout.contentWrapper}>
        {tabs}
        {content}
      </PickersLayoutContentWrapper>
    </PickersLayoutRoot>
  );
}

export default function CustomStaticDatePicker() {
  return <StaticDatePicker slots={{ layout: MyCustomLayout }} />;
}

文档全面修订

Date and Time Pickers 文档 在预发布期间得到了极大的改进，现在具有更易于理解的导航结构和许多新示例。

移除桌面 Time Pickers 上的时钟视图

许多最终用户抱怨，我们完全同意，时钟视图 不是桌面上的理想时间选择体验，因此我们将其从默认视图中移除。

时钟 picker，仍然存在于移动设备上。

如果您愿意，仍然可以使用时钟，但 时间 picker 的替代 UI 将在此版本发布后不久推出。

用于在日历中选择特定日期的快捷方式

您现在可以为您的最终用户添加快速且可自定义的快捷方式。虽然快捷方式是 MIT 许可的，但它对于日期范围选择器特别有用。您可以将它们显示在左侧、右侧、底部或顶部。

带有左侧快捷方式的 Pro 计划日期范围选择器的演示。

通过拖放编辑日期范围

编辑日期范围 现在通过新的拖放交互变得更加容易。最终用户可以更轻松地更改开始和结束日期。

安装和迁移

如果这是您第一次使用 MUI X，您可以跳转到入门部分

• Data Grid
• Date Pickers

如果您是从以前的版本升级，我们建议您查看我们的 MUI X v5 迁移指南，其中包含完整的重大更改列表

• Data Grid
• Date Pickers

我们还提供 codemods 来自动化您的代码库中一些必要的更新。

npx @mui/x-codemod@latest v6.0.0/preset-safe <path>

下一步是什么？

我们在持续交付环境中运营，因此计划在次要版本中不断推出新功能。

随着 v6.0.0 中建立的新基础，我们将继续努力改进 UI/UX、带来更多自定义能力并支持新的用例。

以下列表是您可以期望在未来几个月内交付的内容（我们近期路线图上的内容）。

Data Grid

• 剪贴板导入 (mui-x#199)
• 标头上的筛选 (mui-x#6247)
• 行跨越 (mui-x#207)
• 改进的列管理面板（列可见性、重新排序、分组、固定等）(mui-x#5700)
• 改进的筛选面板 (mui-x#6419)
• 支持 Joy UI

Date Pickers

• 桌面时钟的 Time Picker 替代方案 (mui-x#4483)
• Time Range Picker (mui-x#4460)
• Date Time Range Picker (mui-x#4547)
• 在 Date Range Picker 中选择月份范围的能力 (mui-x#4995)
• 支持 Joy UI

图表 📊

• 图表组件预览 🔥 (mui-x#1408)

您可以在 MUI X 公共路线图 中获得我们后续步骤的更多详细信息。

版本与 MUI Core 解耦

我们已将 MUI X 的版本控制与 MUI Core（包括 @mui/material: Material UI）解耦。我们理解这可能会引起混淆，因此我们想解释一下我们朝着这个方向发展的主要原因

1. 通过年度发布周期缓解迁移痛苦。
   MUI X 代码库是动态的，新功能的不断开发通常需要比 MUI Core 更快的重大更改节奏。通过年度发布，我们旨在以更小、更易消化的大小交付这些更改，并在您可以依赖的时间窗口内制定计划并为更新做好准备。

2. 我们的目标不仅支持 Material UI，还支持 Joy UI，以及未来的 Base UI。

反馈

感谢您在新版本开发过程中提供的所有反馈。这对于我们的流程至关重要，并且永远如此，因此当我们进行后续步骤时，请继续分享您的想法。

我们一直在进行用户访谈，因此如果您想分享您的痛点和用例，请留下您的联系方式。与往常一样，欢迎您通过请求或评论新功能，或在我们的 GitHub 存储库 中报告错误来加入讨论。

干杯！