mui-grid-v2-props-migration-react

Name: mui-grid-v2-props-migration-react codemod
Availability: InStock

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 -> size
xsOffset, smOffset, mdOffset, lgOffset, xlOffset -> offset
removes legacy item
rewrites zeroMinWidth to sx={{ minWidth: 0 }} and merges with existing sx
leaves container unchanged
skips ambiguous size/offset conflicts unless forced with params

Examples

tsx
// Before
<Grid xs={12} sm={6} md={4} />

// After
<Grid size={{ xs: 12, sm: 6, md: 4 }} />

tsx
// Before
<Grid item xs />

// After
<Grid size="grow" />

tsx
// Before
<Grid zeroMinWidth sx={{ p: 1 }} />

// After
<Grid sx={{ p: 1, minWidth: 0 }} />

Preserve Cases

local <Grid> components or other libraries with the same prop names
files without JSX
already-migrated size/offset usage
ambiguous conflicts such as size={foo} with legacy breakpoint props, unless force-conflict-resolution=true

Usage

bash
# Run from the registry
pnpm dlx codemod@latest run mui-grid-v2-props-migration-react

# Run the local package workflow
pnpm dlx codemod@latest run -w workflow.yaml

Optional params:

stabilize-import=true: rewrite @mui/material/Unstable_Grid2 imports to @mui/material/Grid2
compact-single-breakpoint=true: emit compact size when only xs remains
force-conflict-resolution=true: remove legacy breakpoint props even when existing size/offset props are non-object expressions
legacy-precedence=true: when conflicts are forced, prefer legacy breakpoint values over existing size/offset values

Example:

bash
pnpm dlx codemod@latest run -w workflow.yaml --param stabilize-import=true --param force-conflict-resolution=true

Development

bash
# Test fixtures
pnpm test

# Typecheck the codemod
pnpm check-types

# Validate workflow metadata
pnpm dlx codemod@latest workflow validate -w workflow.yaml

# Publish to registry
pnpm dlx codemod@latest login
pnpm dlx codemod@latest publish

References

License

MIT