如何把 Refine Material UI 项目从 MUI v5 迁移到 v6 并对齐 mui/x-data-grid v7 版本【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine如果你有一个基于 Refine 的refinedev/mui集成项目目前使用 MUI v5 与mui/x-data-gridv6需要升级到 MUI v6 并将表格组件对齐到mui/x-data-gridv7这篇指南可以直接照着执行。操作依据是仓库中的迁移文档 MUI v5 to v6 迁移指南它只覆盖 Refine 相关部分MUI 自身的完整变更需要对照 Material UI 官方 v6 迁移指南和 MUI X Data Grid v7 迁移指南处理。版本对齐先确认各包该装到哪个主版本Material UI 的大版本更新涉及以下包mui/material6mui/icons-material6mui/system6mui/lab6mui/material-nextjs6mui/styled-engine-sc6mui/utils6mui/x-data-grid7需要注意mui/x-*包与其余mui/*包不采用同一套版本号MUI 升到 v6 时配套的 Data Grid 是 v7。refinedev/mui对mui/x-*和其他mui/*包声明了 peer 依赖迁移文档给出的对齐关系如下refinedev/muimui/x-data-gridmui/materialmui/systemmui/labmui/icons-materialrefinedev/inferencer5.x.x6.x.x5.x.x5.x.x5.x.x5.x.x4.x.x6.x.x7.x.x6.x.x6.x.x6.x.x6.x.x5.x.x第一行是迁移前的现状第二行是本次迁移的目标。也就是说refinedev/mui升到 6.x 时MUI 各包全部是 6.xmui/x-data-grid是 7.x如果使用refinedev/inferencer它要升到 5.x。仓库基线安装命令见 Material UI 集成介绍。按上面的对齐表指定主版本后本次迁移的升级命令为以 pnpm 为例mui/material-nextjs、mui/styled-engine-sc、mui/utils仅在项目中实际使用时才需要一并升级pnpm add refinedev/mui^6 refinedev/react-hook-form emotion/react emotion/styled \ mui/material^6 mui/icons-material^6 mui/system^6 mui/lab^6 \ mui/x-data-grid^7使用 Inferencer 的话再执行pnpm add refinedev/inferencer^5版本现状说明迁移文档描述的是refinedev/mui6.x与mui/x-data-grid7的组合。当前主干的 packages/mui/package.json 已是 8.0.2peer 依赖为mui/material: ^6.1.7、mui/lab: ^6.0.0-beta.14、mui/x-data-grid: ^8.24.0且要求node 20。如果你不是迁移到 6.x 而是直接安装最新版refinedev/mui请以实际安装版本在 npm 上声明的 peer 依赖为准来对齐 MUI 各包版本不要照搬 6.x 这一行。代码改动替换弃用的组件与类型refinedev/mui中有一批组件在refinedev/mui6起被弃用、在refinedev/mui7中移除。迁移时按下表把旧写法换成替代项弃用组件替代项useSiderVisibleuseThemedLayoutContext见 useThemedLayoutContextnotificationProvideruseNotificationProviderLayout /ThemedLayout /见 ThemedLayout 文档Title /ThemedTitle /Sider /ThemedSider /Header /ThemedHeader /LoginPage /ThemedLoginPage /见 AuthPage 文档WelcomePage /改用refinedev/core提供的能力ReadyPage /无替代项对应的类型也发生了替换旧的Refine*Layout*Props类型统一收敛为RefineThemedLayout*Props- RefineLayoutLayoutProps - RefineThemedLayoutProps RefineThemedLayoutProps - RefineLayoutSiderProps - RefineThemedLayoutSiderProps RefineThemedLayoutSiderProps - RefineLayoutHeaderProps - RefineThemedLayoutHeaderProps RefineThemedLayoutHeaderPropsnotificationProvider的用法对应为来自 集成介绍import { Refine } from refinedev/core; import { useNotificationProvider } from refinedev/mui; const App () { return ( Refine notificationProvider{useNotificationProvider}{/* ... */}/Refine ); };注意RefineSnackbarProvider /是管理notistack通知所必需的组件替换时不要漏掉。mui/x-data-grid v7 侧的变更refinedev/mui6本身除了升级到mui/x-data-grid7外没有破坏性变更但mui/x-data-grid7有一处影响视觉的改动useDataGrid钩子以前会返回一个用于给 Data Grid 加样式的sx对象v7 中这个sx被移除表格改用mui/x-data-grid7的默认样式。被移除的样式对象形如文档示例import { darken, useTheme } from mui/material/styles; const theme useTheme(); const sx { border: none, .MuiDataGrid-columnHeaders: { background: darken(theme.palette.background.paper, 0.05), borderBottom: 1px solid ${darken(theme.palette.background.paper, 0.1)}, }, .MuiDataGrid-cell: { borderBottom: 1px solid ${darken(theme.palette.background.paper, 0.05)}, }, };如果你之前在代码里依赖这套边框/表头背景样式迁移后表格外观会变为 v7 默认样式需要在自己的样式层中重新实现差异部分。可选分支项目仍停留在旧版useDataGrid分页 API 时。如果你的表格代码还在用page、pageSize、onPageChange、onPageSizeChange那是更早一次 Data Grid 大版本v6遗留的旧 API当前 useDataGrid 文档 的正式 API 是paginationModel/onPaginationModelChange改动方式见 Data Grid v4 到 v5 迁移指南const PostList () { const { dataGridProps } useDataGrid(); - const { page, pageSize, onPageChange, onPageSizeChange, ...restDataGridProps } dataGridProps; const { paginationModel, onPaginationModelChange, ...restDataGridProps } dataGridProps; return ( DataGrid {...restDataGridProps} - page{page} - pageSize{pageSize} - onPageChange{onPageChange} - onPageSizeChange{onPageSizeChange} paginationModel{paginationModel} onPaginationModelChange{onPaginationModelChange} / ); }同一份指南还指出GridColumns类型已被移除定义列时必须改为GridColDef数组- import { DataGrid, GridColumns } from mui/x-data-grid; import { DataGrid, GridColDef } from mui/x-data-grid; - const columns React.useMemoGridColumnsIPost( const columns React.useMemoGridColDefIPost[]( () [/* ... */], [], );迁移后如何核对仓库文档没有给出统一的一键验证命令可以按迁移指南列出的变更逐项自查版本对齐对照上文对齐表检查package.json/ lockfile 中refinedev/mui、mui/material、mui/system、mui/lab、mui/icons-material、mui/x-data-grid、refinedev/inferencer的实际安装版本是否落在 6.x / 7.x / 5.x 一档或你实际安装的主版本对应的 peer 声明。残留引用在源码目录中检索已被替换的名称应搜不到结果grep -rn useSiderVisible\|RefineLayoutLayoutProps\|RefineLayoutSiderProps\|RefineLayoutHeaderProps src旧的分页 API 同理grep -rn onPageSizeChange\|GridColumns src外观检查打开使用useDataGrid的列表页确认表格表头与单元格边框符合mui/x-data-grid7默认样式若设计要求旧样式的边框效果按前述说明在自有样式中补齐。限制与边界迁移指南只覆盖 Refine 相关部分MUI v6 与 Data Grid v7 的完整破坏性变更以官方迁移指南为准本文不重复展开。ReadyPage /没有替代组件WelcomePage /需要改由refinedev/core的能力承接这两处没有等价替换迁移时要单独处理。对齐表描述的是refinedev/mui6.x一档主干已演进到更新的 major 版本见上文版本现状说明不要把 6.x 的 peer 关系套用到更新的版本上。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考