@material-ui/codemod
Advanced tools
Codemod scripts for Material-UI
This repository contains a collection of codemod scripts based for use with jscodeshift that help update Material-UI APIs.
npx @material-ui/codemod@next <codemod> <paths...>
Applies a `@material-ui/codemod` to the specified paths
Positionals:
codemod The name of the codemod [string]
paths Paths forwarded to `jscodeshift` [string]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--dry dry run (no changes are made to files)
[boolean] [default: false]
--print print transformed files to stdout, useful for development
[boolean] [default: false]
--jscodeshift [string] [default: false]
Examples:
npx @material-ui/codemod@next v4.0.0/theme-spacing-api src
npx @material-ui/codemod@next v5.0.0/component-rename-prop src --
--component=Grid --from=prop --to=newProp
To pass more options directly to jscodeshift, use --jscodeshift="...". For example:
npx @material-ui/codemod@next --jscodeshift="--run-in-band --verbose=2"
See all available options here.
Options to recast's printer can be provided
through jscodeshift's printOptions command line argument
npx @material-ui/codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
preset-safeA combination of all important transformers for migrating v4 to v5. ⚠️ This mod is not idempotent (theme-breakpoints) and should be run only once.
npx @material-ui/codemod@next v5.0.0/preset-safe <path|folder>
The list includes these transformers
adapter-v4autocomplete-rename-closeiconautocomplete-rename-optionavatar-circle-circularbadge-overlap-valuebox-borderradius-valuesbox-rename-cssbox-rename-gapbutton-color-propchip-variant-propcircularprogress-variantcollapse-rename-collapsedheightcore-styles-importcreate-themedialog-propsdialog-title-propsemotion-prepend-cacheexpansion-panel-componentfab-variantfade-rename-alphagrid-justify-justifycontentgrid-list-componenticon-button-sizematerial-ui-stylesmaterial-ui-typesmodal-propsmoved-lab-modulespagination-round-circularroot-refskeleton-variantstyled-engine-providertable-propstabs-scroll-buttonstextarea-minmax-rowstheme-augmenttheme-breakpointstheme-breakpoints-widththeme-optionstheme-palette-modetheme-providertheme-spacingtheme-typography-roundtransitionsuse-autocompleteuse-transitionpropswith-mobile-dialogwith-widthadapter-v4import and insert adaptV4Theme to createTheme (or createMuiTheme)
+import { adaptV4Theme } from '@material-ui/core/styles';
-createTheme({ palette: { ... }})
+createTheme(adaptV4Theme({ palette: { ... }}))
npx @material-ui/codemod@next v5.0.0/adapter-v4 <path>
You can find more details about this breaking change in the migration guide.
autocomplete-rename-closeiconRenames fade style utility import and calls from fade to alpha.
-<Autocomplete closeIcon={defaultClearIcon} />
+<Autocomplete clearIcon={defaultClearIcon} />
npx @material-ui/codemod@next v5.0.0/autocomplete-rename-closeicon <path>
You can find more details about this breaking change in the migration guide.
autocomplete-rename-optionRenames getOptionSelected to isOptionEqualToValue.
<Autocomplete
- getOptionSelected={(option, value) => option.title === value.title}
+ isOptionEqualToValue={(option, value) => option.title === value.title}
/>
npx @material-ui/codemod@next v5.0.0/autocomplete-rename-option <path>
You can find more details about this breaking change in the migration guide.
avatar-circle-circularUpdates the Avatar variant value and classes key from 'circle' to 'circular'.
-<Avatar variant="circle" />
-<Avatar classes={{ circle: 'className' }} />
+<Avatar variant="circular" />
+<Avatar classes={{ circular: 'className' }} />
npx @material-ui/codemod@next v5.0.0/avatar-circle-circular <path>
You can find more details about this breaking change in the migration guide.
badge-overlap-valueRenames the badge's props.
-<Badge overlap="circle">
-<Badge overlap="rectangle">
+<Badge overlap="circular">
+<Badge overlap="rectangular">
<Badge classes={{
- anchorOriginTopRightRectangle: 'className',
- anchorOriginBottomRightRectangle: 'className',
- anchorOriginTopLeftRectangle: 'className',
- anchorOriginBottomLeftRectangle: 'className',
- anchorOriginTopRightCircle: 'className',
- anchorOriginBottomRightCircle: 'className',
- anchorOriginTopLeftCircle: 'className',
+ anchorOriginTopRightRectangular: 'className',
+ anchorOriginBottomRightRectangular: 'className',
+ anchorOriginTopLeftRectangular: 'className',
+ anchorOriginBottomLeftRectangular: 'className',
+ anchorOriginTopRightCircular: 'className',
+ anchorOriginBottomRightCircular: 'className',
+ anchorOriginTopLeftCircular: 'className',
}}>
npx @material-ui/codemod@next v5.0.0/badge-overlap-value <path>
You can find more details about this breaking change in the migration guide.
box-borderradius-valuesUpdates the Box API from separate system props to sx.
-<Box borderRadius="borderRadius">
-<Box borderRadius={16}>
+<Box borderRadius={1}>
+<Box borderRadius="16px">
npx @material-ui/codemod@next v5.0.0/box-borderradius-values <path>
You can find more details about this breaking change in the migration guide.
box-rename-cssRenames the Box css prop to sx
-<Box css={{ m: 2 }}>
+<Box sx={{ m: 2 }}>
npx @material-ui/codemod@next v5.0.0/box-rename-css <path>
You can find more details about this breaking change in the migration guide.
box-rename-gapRenames the Box grid*Gap props.
-<Box gridGap={2}>Item 3</Box>
-<Box gridColumnGap={3}>Item 4</Box>
-<Box gridRowGap={4}>Item 5</Box>
+<Box gap={2}>Item 3</Box>
+<Box columnGap={3}>Item 4</Box>
+<Box rowGap={4}>Item 5</Box>
npx @material-ui/codemod@next v5.0.0/box-rename-gap <path>
You can find more details about this breaking change in the migration guide.
button-color-propRemoves the outdated color prop values.
-<Button color="default">
+<Button>
npx @material-ui/codemod@next v5.0.0/button-color-prop <path>
You can find more details about this breaking change in the migration guide.
chip-variant-propRemoves the Chip variant prop if the value is "default".
-<Chip variant="default">
+<Chip>
npx @material-ui/codemod@next v5.0.0/chip-variant-prop <path>
You can find more details about this breaking change in the migration guide.
circularprogress-variantRename the CircularPress static variant to determinate.
-<CircularProgress variant="static" classes={{ static: 'className' }} />
+<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
npx @material-ui/codemod@next v5.0.0/circularprogress-variant <path>
You can find more details about this breaking change in the migration guide.
collapse-rename-collapsedheightRename the CircularPress static variant to determinate.
-<Collapse collapsedHeight={40} />
-<Collapse classes={{ container: 'collapse' }} />
+<Collapse collapsedSize={40} />
+<Collapse classes={{ root: 'collapse' }} />
npx @material-ui/codemod@next v5.0.0/collapse-rename-collapsedheight <path>
You can find more details about this breaking change in the migration guide.
component-rename-propA generic codemod to rename any component prop.
-<Component prop="value" />
-<Component prop />
+<Component newProp="value" />
+<Component newProp />
npx @material-ui/codemod@next v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp
core-styles-importRename private import from core/styles/* to core/styles
-import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
+import { darken, lighten } from '@material-ui/core/styles';
npx @material-ui/codemod@next v5.0.0/core-styles-import <path>
create-themeRename the function createMuiTheme to createTheme
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
npx @material-ui/codemod@next v5.0.0/create-theme <path>
dialog-propsRemove disableBackdropClick prop from <Dialog>
-<Dialog disableBackdropClick />
+<Dialog />
npx @material-ui/codemod@next v5.0.0/dialog-props <path>
You can find more details about this breaking change in the migration guide.
dialog-title-propsRemove disableTypography prop from <DialogTitle>
-<DialogTitle disableTypography />
+<DialogTitle />
npx @material-ui/codemod@next v5.0.0/dialog-title-props <path>
You can find more details about this breaking change in the migration guide.
emotion-prepend-cacheadd prepend: true to emotion createCache
const cache = emotionCreateCache({
key: 'css',
+ prepend: true,
});
npx @material-ui/codemod@next v5.0.0/create-theme <path>
expansion-panel-componentRename ExpansionPanel* to Accordion*
npx @material-ui/codemod@next v5.0.0/expansion-panel-component <path>
You can find more details about this breaking change in the migration guide.
fab-variant-<Fab variant="round" />
+<Fab variant="circular" />
npx @material-ui/codemod@next v5.0.0/fab-variant <path>
You can find more details about this breaking change in the migration guide.
fade-rename-alphaRenames fade style utility import and calls frpm fade to alpha.
-import { fade, lighten } from '@material-ui/core/styles';
+import { alpha, lighten } from '@material-ui/core/styles';
-const foo = fade('#aaa');
+const foo = alpha('#aaa');
npx @material-ui/codemod@next v5.0.0/fade-rename-alpha <path>
You can find more details about this breaking change in the migration guide.
grid-justify-justifycontentRenames fade style utility import and calls frpm fade to alpha.
-<Grid justify="left">Item</Grid>
+<Grid item justifyContent="left">Item</Grid>
npx @material-ui/codemod@next v5.0.0/grid-justify-justifycontent <path>
You can find more details about this breaking change in the migration guide.
grid-list-componentRename GridList* to ImageList*
npx @material-ui/codemod@next v5.0.0/grid-list-component <path>
You can find more details about this breaking change in the migration guide.
icon-button-sizeAdd size="large" if size is empty to get the same UI as v4
-<IconButton size="medium" />
-<IconButton />
+<IconButton size="medium" />
+<IconButton size="large" />
npx @material-ui/codemod@next v5.0.0/icon-button-size <path>
You can find more details about this breaking change in the migration guide.
link-underline-hoverApply underline="hover" to <Link /> that does not define underline prop (to get the same behavior as in v4).
-<Link />
+<Link underline="hover" />
npx @material-ui/codemod@next v5.0.0/icon-button-size <path>
You can find more details about this breaking change in the migration guide.
material-ui-stylesMove JSS imports to @material-ui/styles
-import {
- createGenerateClassName,
- createStyles,
- jssPreset,
- makeStyles,
- ServerStyleSheets,
- useThemeVariants,
- withStyles,
- withTheme,
- ThemeProvider,
- styled,
- getStylesCreator,
- mergeClasses,
-} from '@material-ui/core/styles';
+import { ThemeProvider, styled } from '@material-ui/core/styles';
+import createGenerateClassName from '@material-ui/styles/createGenerateClassName';
+import createStyles from '@material-ui/styles/createStyles';
+import jssPreset from '@material-ui/styles/jssPreset';
+import makeStyles from '@material-ui/styles/makeStyles';
+import ServerStyleSheets from '@material-ui/styles/ServerStyleSheets';
+import useThemeVariants from '@material-ui/styles/useThemeVariants';
+import withStyles from '@material-ui/styles/withStyles';
+import withTheme from '@material-ui/styles/withTheme';
+import getStylesCreator from '@material-ui/styles/getStylesCreator';
import mergeClasses from '@material-ui/styles/mergeClasses';
npx @material-ui/codemod@next v5.0.0/material-ui-styles <path>
material-ui-typesRenames Omit import from @material-ui/types to DistributiveOmit
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
npx @material-ui/codemod@next v5.0.0/material-ui-types <path>
You can find more details about this breaking change in the migration guide.
modal-propsRemoves disableBackdropClick and onEscapeKeyDown from <Modal>
<Modal
- disableBackdropClick
- onEscapeKeyDown={handleEscapeKeyDown}
/>
npx @material-ui/codemod@next v5.0.0/modal-props <path>
You can find more details about this breaking change in the migration guide.
moved-lab-modulesUpdates all imports for @material-ui/lab components that have moved to @material-ui/core.
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
or
-import { SpeedDial } from '@material-ui/lab';
+import { SpeedDial } from '@material-ui/core';
npx @material-ui/codemod@next v5.0.0/moved-lab-modules <path>
You can find more details about this breaking change in the migration guide.
pagination-round-circular-<Pagination shape="round" />
-<PaginationItem shape="round" />
+<Pagination shape="circular" />
+<PaginationItem shape="circular" />
npx @material-ui/codemod@next v5.0.0/pagination-round-circular <path>
You can find more details about this breaking change in the migration guide.
root-refRemoves RootRef from the codebase
npx @material-ui/codemod@next v5.0.0/root-ref <path>
You can find more details about this breaking change in the migration guide.
skeleton-variant-<Skeleton vairiant="circle" />
-<Skeleton vairiant="rect" />
+<Skeleton vairiant="circular" />
+<Skeleton vairiant="rectangular" />
npx @material-ui/codemod@next v5.0.0/skeleton-variant <path>
You can find more details about this breaking change in the migration guide.
styled-engine-providerApplies StyledEngineProvider to the files that contains ThemeProvider
npx @material-ui/codemod@next v5.0.0/styled-engine-provider <path>
You can find more details about this breaking change in the migration guide.
table-propsRenames props in Table* components
-<>
- <TablePagination onChangeRowsPerPage={() => {}} onChangePage={() => {}} />
- <TablePagination classes={{ input: 'foo' }} />
- <Table padding="default" />
- <TableCell padding="default" />
-</>
+<>
+ <TablePagination onRowsPerPageChange={() => {}} onPageChange={() => {}} />
+ <TablePagination classes={{ select: 'foo' }} />
+ <Table padding="normal" />
+ <TableCell padding="normal" />
+</>
npx @material-ui/codemod@next v5.0.0/table-props <path>
You can find more details about this breaking change in the migration guide.
tabs-scroll-buttons-<Tabs scrollButtons="on" />
-<Tabs scrollButtons="desktop" />
-<Tabs scrollButtons="off" />
+<Tabs scrollButtons allowScrollButtonsMobile />
+<Tabs scrollButtons />
+<Tabs scrollButtons={false} />
npx @material-ui/codemod@next v5.0.0/tabs-scroll-buttons <path>
You can find more details about this breaking change in the migration guide.
textarea-minmax-rows-<TextField rowsMin={3} rowsMax={6} />
-<TextareaAutosize rows={2} />
-<TextareaAutosize rowsMin={3} rowsMax={6} />
+<TextField minRows={3} maxRows={6} />
+<TextareaAutosize minRows={2} />
+<TextareaAutosize minRows={3} maxRows={6} />
npx @material-ui/codemod@next v5.0.0/textarea-minmax-rows <path>
You can find more details about this breaking change in the migration guide.
theme-augmentAdd DefaultTheme module augment for typescript project
npx @material-ui/codemod@next v5.0.0/theme-augment <path>
You can find more details about this breaking change in the migration guide.
theme-breakpointsUpdates breakpoint values to match new logic. ⚠️ This mod is not idempotent, it should be run only once.
-theme.breakpoints.down('sm')
-theme.breakpoints.between('sm', 'md')
+theme.breakpoints.down('md')
+theme.breakpoints.between('sm', 'lg')
npx @material-ui/codemod@next v5.0.0/theme-breakpoints <path>
You can find more details about this breaking change in the migration guide.
theme-breakpoints-widthRename theme.breakpoints.width('md') to theme.breakpoints.values.md
npx @material-ui/codemod@next v5.0.0/theme-breakpoints-width <path>
You can find more details about this breaking change in the migration guide.
theme-options-import { ThemeOptions } from '@material-ui/core';
+import { DeprecatedThemeOptions } from '@material-ui/core';
npx @material-ui/codemod@next v5.0.0/theme-options <path>
theme-palette-modeRename type to mode
- { palette: { type: 'dark' } }
+ { palette: { mode: 'dark' } }
-theme.palette.type === 'dark'
+theme.palette.mode === 'dark'
npx @material-ui/codemod@next v5.0.0/theme-palette-mode <path>
You can find more details about this breaking change in the migration guide.
theme-providerRename MuiThemeProvider to ThemeProvider
npx @material-ui/codemod@next v5.0.0/theme-provider <path>
You can find more details about this breaking change in the migration guide.
theme-spacingRemoves the 'px' suffix from some template strings.
-`${theme.spacing(2)}px`
-`${theme.spacing(2)}px ${theme.spacing(4)}px`
+`${theme.spacing(2)}`
+`${theme.spacing(2)} ${theme.spacing(4)}`
npx @material-ui/codemod@next v5.0.0/theme-spacing <path>
You can find more details about this breaking change in the migration guide.
theme-typography-roundRemove theme.typography.round($number) to Math.round($number * 1e5) / 1e5
-`${theme.typography.round($number)}`
+`${Math.round($number * 1e5) / 1e5}`
npx @material-ui/codemod@next v5.0.0/theme-typography-round <path>
You can find more details about this breaking change in the migration guide.
transitionsRenames import transitions to createTransitions
npx @material-ui/codemod@next v5.0.0/transitions <path>
use-autocompleteRenames useAutocomplete related import from lab to core
-import useAutocomplete from '@material-ui/lab/useAutocomplete';
+import useAutocomplete from '@material-ui/core/useAutocomplete';
npx @material-ui/codemod@next v5.0.0/use-autocomplete <path>
use-transitionpropsUpdates Dialog, Menu, Popover, and Snackbar to use the TransitionProps prop to replace the onEnter* and onExit* props.
<Dialog
- onEnter={onEnter}
- onEntered={onEntered}
- onEntering={onEntering}
- onExit={onExit}
- onExited={onExited}
- onExiting={onExiting}
+ TransitionProps={{
+ onEnter,
+ onEntered,
+ onEntering,
+ onExit,
+ onExited,
+ onExiting,
+ }}
/>
npx @material-ui/codemod@next v5.0.0/use-transitionprops <path>
You can find more details about this breaking change in the migration guide.
variant-propDon't run this codemod if you already set
varianttooutlinedorfilledin theme default props.
Add the TextField, Select, and FormControl variant="standard" prop when variant is undefined.
The diff should look like this:
-<TextField value="Standard" />
+<TextField value="Standard" variant="standard" />
-<Select value="Standard" />
+<Select value="Standard" variant="standard" />
-<FormControl value="Standard" />
+<FormControl value="Standard" variant="standard" />
npx @material-ui/codemod@next v5.0.0/variant-prop <path>
with-mobile-dialogRemove and insert hardcoded withMobileDialog to prevent application crash.
- import withMobileDialog from '@material-ui/core/withMobileDialog';
+ // FIXME checkout https://material-ui.com/components/use-media-query/#using-material-uis-breakpoint-helpers
+ const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="lg" fullScreen={false} />;
npx @material-ui/codemod@next v5.0.0/with-mobile-dialog <path>
You can find more details about this breaking change in the migration guide.
with-widthRemove and insert hardcoded withWidth to prevent application crash.
- import withWidth from '@material-ui/core/withWidth';
+ // FIXME checkout https://material-ui.com/components/use-media-query/#migrating-from-withwidth
+ const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
npx @material-ui/codemod@next v5.0.0/with-width <path>
You can find more details about this breaking change in the migration guide.
theme-spacing-apiUpdates the theme-spacing-api from theme.spacing.unit x to theme.spacing(x).
The diff should look like this:
-const spacing = theme.spacing.unit;
+const spacing = theme.spacing(1);
npx @material-ui/codemod@next v4.0.0/theme-spacing-api <path>
This codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.
-const spacing = theme.spacing.unit / 5;
+const spacing = theme.spacing(0.2);
// Limitation
-const spacing = theme.spacing.unit * 5 * 5;
+const spacing = theme.spacing(5) * 5;
optimal-importsConverts all @material-ui/core imports more than 1 level deep to the optimal form for tree shaking:
-import withStyles from '@material-ui/core/styles/withStyles';
-import createTheme from '@material-ui/core/styles/createTheme';
+import { withStyles, createTheme } from '@material-ui/core/styles';
npx @material-ui/codemod@next v4.0.0/optimal-imports <path>
Head to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.
top-level-importsConverts all @material-ui/core submodule imports to the root module:
-import List from '@material-ui/core/List';
-import { withStyles } from '@material-ui/core/styles';
+import { List, withStyles } from '@material-ui/core';
npx @material-ui/codemod@next v4.0.0/top-level-imports <path>
Head to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.
import-pathUpdates the import-paths for the new location of the components.
Material-UI v1.0.0 flatten the import paths.
The diff should look like this:
-import { MenuItem } from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
npx @material-ui/codemod@next v1.0.0/import-path <path>
Notice: if you are migrating from pre-v1.0, and your imports use material-ui, you will need to manually find and replace all references to material-ui in your code to @material-ui/core. E.g.:
-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';
Subsequently, you can run the above find ... command to flatten your imports.
color-importsUpdates the color-imports for the new location of Material-UI color palettes.
The diff should look like this:
-import { blue, teal500 } from 'material-ui/styles/colors';
+import blue from '@material-ui/core/colors/blue';
+import teal from '@material-ui/core/colors/teal';
+const teal500 = teal['500'];
npx @material-ui/codemod@next v1.0.0/color-imports <path>
additional options
npx @material-ui/codemod@next v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
svg-icon-importsUpdates the svg-icons import paths from material-ui/svg-icons/<category>/<icon-name> to @material-ui/icons/<IconName>, to use the new @material-ui/icons package.
The diff should look like this:
-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';
-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';
+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
npx @material-ui/codemod@next v1.0.0/svg-icon-imports <path>
import-pathUpdates the import-paths for the new location of the components.
Material-UI v0.15.0 is reorganizing the folder distribution of the project.
The diff should look like this:
// From the source
-import FlatButton from 'material-ui/src/flat-button';
+import FlatButton from 'material-ui/src/FlatButton';
// From npm
-import RaisedButton from 'material-ui/lib/raised-button';
+import RaisedButton from 'material-ui/RaisedButton';
npx @material-ui/codemod@next v0.15.0/import-path <path>
FAQs
Codemod scripts for Material-UI.
The npm package @material-ui/codemod receives a total of 9,498 weekly downloads. As such, @material-ui/codemod popularity was classified as popular.
We found that @material-ui/codemod demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.