mui-grid-v2-props-migration-react
Automatically rewrite legacy Grid v2 props to the current Material UI Grid API for React projects using @mui/material/Grid2, @mui/system/Grid, or @mui/joy/Grid, including deterministic prop renames/removals and safe JSX cleanup.
What It Rewrites
This codemod parses js, jsx, ts, and tsx files with JSX support and only rewrites JSX elements whose component name resolves to an import from:
@mui/material/Grid2@mui/material/Unstable_Grid2@mui/system/Grid@mui/joy/Grid
By default it performs these JSX migrations:
xs,sm,md,lg,xl->sizexsOffset,smOffset,mdOffset,lgOffset,xlOffset->offset- removes legacy
item - rewrites
zeroMinWidthtosx={{ minWidth: 0 }}and merges with existingsx - leaves
containerunchanged - skips ambiguous
size/offsetconflicts unless forced with params
Examples
Preserve Cases
- local
<Grid>components or other libraries with the same prop names - files without JSX
- already-migrated
size/offsetusage - ambiguous conflicts such as
size={foo}with legacy breakpoint props, unlessforce-conflict-resolution=true
Usage
Optional params:
stabilize-import=true: rewrite@mui/material/Unstable_Grid2imports to@mui/material/Grid2compact-single-breakpoint=true: emit compactsizewhen onlyxsremainsforce-conflict-resolution=true: remove legacy breakpoint props even when existingsize/offsetprops are non-object expressionslegacy-precedence=true: when conflicts are forced, prefer legacy breakpoint values over existingsize/offsetvalues
Example:
Development
References
- https://mui.com/material-ui/migration/upgrade-to-grid-v2/
- https://mui.com/material-ui/react-grid/
- https://mui.com/system/react-grid/
- https://mui.com/joy-ui/react-grid/
License
MIT