Migration Guide for Material UI v6 and X Data Grid v7
Material UI has released major updates for the following packages:
- @mui/material@6
- @mui/icons-material@6
- @mui/system@6
- @mui/lab@6
- @mui/material-nextjs@6
- @mui/styled-engine-sc@6
- @mui/utils@6
- @mui/x-data-grid@7
This guide focuses on migrating Refine-related parts to the latest version.
Package Version Alignment
Note that @mui/x-* packages do not follow the same versioning strategy as other @mui/* packages. However, @refinedev/mui package versions has peer dependencies on @mui/x-* and other @mui/* packages. Please ensure following version alignment to avoid issues:
| @refinedev/mui | @mui/x-data-grid | @mui/material | @mui/system | @mui/lab | @mui/icons-material | @refinedev/inferencer |
|---|---|---|---|---|---|---|
| 5.x.x | 6.x.x | 5.x.x | 5.x.x | 5.x.x | 5.x.x | 4.x.x |
| 6.x.x | 7.x.x | 6.x.x | 6.x.x | 6.x.x | 6.x.x | 5.x.x |
Material UI Changes
For detailed information about Material UI changes, please refer to the official Material UI v6 migration guide.
Removed components
The following components has been deprecated since @refinedev/mui@6 and removed in @refinedev/mui@7:
| Deprecated Component | Replacement | Documentation |
|---|---|---|
useSiderVisible | useThemedLayoutContext | View Docs |
notificationProvider | useNotificationProvider | View Docs |
notificationProvider | useNotificationProvider | View Docs |
<Layout /> | <ThemedLayout /> | View Docs |
<ThemedLayout /> | <ThemedLayout /> | View Docs |
<Title /> | <ThemedTitle /> | View Docs |
<ThemedTitle /> | <ThemedTitle /> | View Docs |
<Sider /> | <ThemedSider /> | View Docs |
<ThemedSider /> | <ThemedSider /> | View Docs |
<Header /> | <ThemedHeader /> | View Docs |
<ThemedHeader /> | <ThemedHeader /> | View Docs |
<LoginPage /> | <ThemedLoginPage /> | View Docs |
<WelcomePage /> | @refinedev/core | |
<ReadyPage /> | no replacement |
Following deprecated types have been replaced with new types:
- RefineLayoutLayoutProps
- RefineThemedLayoutProps
+ RefineThemedLayoutProps
- RefineLayoutSiderProps
- RefineThemedLayoutSiderProps
+ RefineThemedLayoutSiderProps
- RefineLayoutHeaderProps
- RefineThemedLayoutHeaderProps
+ RefineThemedLayoutHeaderProps
X Data Grid Changes
The @refinedev/mui@6 package has no breaking changes except for updating to @mui/x-data-grid@7. However, @mui/x-data-grid@7 includes some important changes you need to check.
For detailed information about Data Grid changes, please refer to the official MUI X Migration Guide for Data Grid.
Stying
In @refinedev/mui@6, the useDataGrid hook was returning the following sx object for styling the Data Grid but in @mui/x-data-grid@7, the sx object has been removed to use default styles from @mui/x-data-grid@7.
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)}`,
},
};