@codemod/mui-gridlist-to-grid-migration
Replace deprecated GridList/GridListTile usage with modern Material UI Grid composition, including import rewrites and prop mapping, to improve maintainability and alignment with current MUI best practices.
Usage
What It Rewrites
GridListbecomesGridwith thecontainerprop.GridListTilebecomesGridwith theitemprop.colsis mapped toxsusing a 12-column grid calculation.- Numeric
spacingvalues are converted from pixel gaps to MUI Grid spacing units by dividing by8and rounding. - Expression-based
spacingvalues are rewritten toMath.round(expr / 8)so Grid still receives scale units instead of pixel values. - Legacy
GridList,GridListTile, andGridListTileBarimports are removed, and aGridimport is added when needed. - The migration always targets
@mui/material/Grid; it does not expose mode flags for alternate import targets or helper emission.
Supported Inputs
- Default imports such as
@material-ui/core/GridListand@material-ui/core/GridListTile - Named imports such as
import { GridList, GridListTile } from '@material-ui/core' - Aliased named imports such as
GridList as LegacyGridList - JavaScript, JSX, TypeScript, and TSX files
- Nested
GridListblocks, which are transformed independently with their owncolsmapping
Preserved Behavior
- Non-layout props such as
className,style,id,key,data-*, and event handlers are preserved. - Existing
Gridimports are reused instead of duplicated. - Locally shadowed
GridListidentifiers are not transformed.
Manual Follow-Up
rowshas no directGridequivalent. The codemod leaves a TODO comment on migrated tiles that used it.GridListTileBaris replaced with a TODO comment for manual migration toImageListItemBaror an app-specific overlay.cellHeightis not recreated automatically. Files using that prop are left unchanged for manual review.
Development
License
MIT