MUI v7更新内容及升级文档

外冷内热的泽卡
828 阅读6分钟

概述：

v7版本于2024年3.22发布，此次升级涉及到的组件有：Data Grid、Date and Time Pickers、Tree View 、Charts

官方博客：mui.com/blog/mui-x-…

v6 to v7指南：mui.com/x/migration…

基础变更

  1. @mui/x-data-grid 打包体积从114.2kB 到 92.9.kB
  2. 证书引入调整，证书依然有效，有效期待确认（已联系）
-import { LicenseInfo } from '@mui/x-license-pro';
+import { LicenseInfo } from '@mui/x-license';
  1. 所有 MUI X 软件包都已删除对 IE 11 的支持。不再包含支持 IE 11 等旧版浏览器的旧版软件包。

重大组件变更

Data Grid

基于虚拟列表实现的数据表格组件。

  1. Dom元素变化

为了使用 CSS sticky定位元素，数据网格的布局发生了以下变化：

  1. 表头元素现在与虚拟滚动元素相对应。
  2. 表头元素现在包含在虚拟列表中。
  3. Pinned元素的行和列部分现在包含在虚拟列表中。
  4. 单元格内包装 .MuiDataGrid-cellContent 已被移除。

关于1.2.3点：

before：表头单独作为一个元素存在，内容区处于表头元素下方，并单独属于虚拟滚动列表内

after：表头与元素与内容元素处于同一虚拟列表内，这样做的好处在于左右滑动时能表头能及时对应上内容区元素

关于4点：

before：Pinned元素与表格数据处于同一div下的层级，原来的实现原理通过float:right+position:sticky实现

after：Pinned元素处于行元素的最后一项（类似于cell元素的属性）

  1. rowBuffer、columnBuffer变化

介绍：行列的虚拟化是指在DataGird横向、垂直滚动时插入和移除行、列元素。这样会导致对于一些可以编辑状态的单元格元素在重新插入时会丢失状态。

rowBuffer 和 columnBuffer 更名为 rowBufferPx 和 columnBufferPx。它们的值现在是像素值，而不是items数，它们的默认值现在是 150。

官方文档提供了 disableVirtualization :禁止虚拟化

  1. Columns

GridColDef['type'] 已缩小到只接受内置列类型。TypeScript 用户在定义列时需要使用 GridColDef 接口，故在项目中对于一些使用...语法的部分的colums中的type被推断为string类型时会报错不匹配GridColType，故改成concat方法，并对于GridColDef['type']有很好的类型推断

  1. GridColDef中一些取值原有的一些方法的取值改动：

涉及到的方法有：valueGetter、valueFormatter、valueSetter、valueParser、colSpan、pastedValueParser、groupingValueGetter

已移除的类型接口有：GridValueGetterParams、GridValueFormatterParams、GridValueSetterParams

1.
-valueGetter: ({ value, row }) => value,
+valueGetter: (value, row, column, apiRef) => value

2.
// GridValueGetterParams已移除
-const customValueGetter = (params: GridValueGetterParams) => params.row.budget;
+const customValueGetter: GridValueGetterFn = (value, row) => row.budget;

3.
-valueFormatter: ({ value }) => value,
+valueFormatter: (value, row, column, apiRef) => value,

4.
// GridValueFormatterParams已移除
-const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams<Date>) => value.toLocaleDateString();
+const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString();

5.
-valueSetter: (params) => {
-  const [firstName, lastName] = params.value!.toString().split(' ');
-  return { ...params.row, firstName, lastName };
-}
+valueSetter: (value, row) => {
+  const [firstName, lastName] = value!.toString().split(' ');
+  return { ...row, firstName, lastName };
+}

6. 
// GridValueSetterParams已移除
-const setFullName = (params: GridValueSetterParams) => {
-  const [firstName, lastName] = params.value!.toString().split(' ');
-  return { ...params.row, firstName, lastName };
-};
+const setFullName: GridValueSetter<Row> = (value, row) => {
+  const [firstName, lastName] = value!.toString().split(' ');
+  return { ...row, firstName, lastName };
+}

5.
-valueParser: (value, params: GridCellParams) => value.toLowerCase(),
+valueParser: (value, row, column, apiRef) => value.toLowerCase(),

6.
-colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1),
+colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1),

7.
-pastedValueParser: (value, params) => new Date(value),
+pastedValueParser: (value, row, column, apiRef) => new Date(value),

8.
-groupingValueGetter: (params) => params.value.name,
+groupingValueGetter: (value: { name: string }, row, column, apiRef) => value.name,

  1. CSS样式及类型变化

  • 您现在可以使用 :hover而不是 来设置行的悬停状态的样式.Mui-hovered。
  • 固定列的类.MuiDataGrid--pinnedColumns-(left|right)已被删除。
  • 该类.MuiDataGrid-cell--withRenderer已被删除。
  • 默认情况下，单元格元素不是display: flex。您可以添加display: 'flex'列定义来恢复行为。注意：如果您使用动态行高，这也意味着单元格默认不再垂直居中，您可能需要display: 'flex'为所有非动态列设置 。这也可能会影响文本省略，您可以通过添加您自己的包装器来恢复文本省略text-overflow: ellipsis;。
  • 该类columnHeader--showColumnBorder已替换为columnHeader--withLeftBorder和columnHeader--withRightBorder。
  • 由于我们为了简化 DOM 结构和提高可访问性而删除了内部包装器，因此 、 和 类已columnHeadersInner被columnHeadersInner--scrollable删除。columnHeaderDropZone
  • pinnedColumnHeaders、pinnedColumnHeaders--left和类pinnedColumnHeaders--right连同它们所应用到的元素一起被删除。固定的列标题现在使用position: 'sticky'并在与常规列标题相同的行元素中呈现。
  • 最主要的改动在于datagrid的表头、数据项以及pinned因为升级优化做了较大结构变化，导致项目内的首个元素以及末尾元素的padding配置失效

before：通过表头/单元格获取首个/末尾元素设置padding

image.png

after：与开发者沟通后使用此类方式，上面讲过在v7中Pinned作为一个单元元素与单元数据在同一列

'&[aria-colindex="1"]': {
    paddingLeft: theme.spacing(size === 'small' ? 3 : 5)
},
`&[aria-colindex="${newColumns.length}"]`]: {
    paddingRight: theme.spacing(size === 'small' ? 3 : 5)
},

  1. 一些新的正式功能发布

  1. mui.com/x/react-dat… 以组为列表头
  1. mui.com/x/react-dat… 列表数据需要依赖服务器请求时的懒加载
  1. mui.com/x/react-dat… 可在表头上快速访问各栏筛选器
  1. mui.com/x/react-dat…

Date and Time Pickers

用法类似于Date Range Picker，支持日期、时间选择，目前项目内使用的是MobileDateTimePicker，目前项目内对于范围的日期时间选择均已替换

Simple Tree View（原Tree View）

TreeView 在v7中已经被弃用

  1. props重命名

onNodeToggle、expanded、defaultExpanded、nodeId

onNodeToggle --> onExpandedItemsChange
expanded --> expandedItems
defaultExpanded --> defaultExpandedItems
nodeId --> itemId

  1. 如果使用到@mui/icons-material中的ExpandMore、ChevronRight可以删除相关配置，现在已为默认值

  1. 如果需要自定义expandIcon、collapseIcon使用下面方式

 <SimpleTreeView
-  defaultExpandIcon={<MyCustomExpandIcon />}
+  slots={{ expandIcon: MyCustomExpandIcon }}
 >
   {items}
 </SimpleTreeView>
 
 <SimpleTreeView
-   defaultCollapseIcon={<MyCustomCollapseIcon />}
+   slots={{ collapseIcon: MyCustomCollapseIcon }}
  >
    {items}
 </SimpleTreeView>

  1. 新增Rich Tree View

与Data Grid类似，它只需要一个数据集和可能的几个属性即可展示。

const myDataSet = [
  {
    id: 'node-1',
    label: 'Node 1',
    children: [
      { id: 'node-1-1', label: 'Node 1.1' },
      { id: 'node-1-2', label: 'Node 1.2' },
    ],
  },
  {
    id: 'node-2',
    label: 'Node 2',
  },
];

<RichTreeView items={myDataSet} multiSelect />

同时v7中提供了TreeItem2组件，这是一个新组件，提供更强大的自定义 API，最终将取代 TreeItem。

使用 SimpleTreeView 时，可以从 @mui/x-tree-view/TreeItem2 中导入该组件，并将其作为 SimpleTreeView 组件的子组件使用。

Charts

  1. 新增了仪表图

  1. 新增每种图表类型click事件处理

  1. Axis 组件现在具有新增内置网格，为用户提供结构化布局，以便于数据分析和可视化。

  1. 新增ChartsReferenceLine，使组件增强了数据可视化，为用户提供清晰的参考，以更好地理解和分析关键数据点。

存在痛点：

  1. 尚未能解决echarts自定义tooltip样式问题
  2. dataGrid中对于pinned元素无法动态根据是否列完全展示设置阴影（目前看到已提issue，开发者回应预计在v7版本中改进、待后续跟进）
avatar
文章
阅读
粉丝