README
@mui/codemod
Codemod scripts for MUI
This repository contains a collection of codemod scripts based for use with jscodeshift that help update MUI APIs.
Setup & run
npx @mui/codemod <codemod> <paths...>
Applies a `@mui/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]
--parser which parser for jscodeshift to use.
[string] [default: 'tsx']
--print print transformed files to stdout, useful for development
[boolean] [default: false]
--jscodeshift [string] [default: false]
Examples:
npx @mui/codemod v4.0.0/theme-spacing-api src
npx @mui/codemod v5.0.0/component-rename-prop src --
--component=Grid --from=prop --to=newProp
npx @mui/codemod v5.0.0/preset-safe src --parser=flow
jscodeshift options
To pass more options directly to jscodeshift, use --jscodeshift="..."
. For example:
npx @mui/codemod --jscodeshift="--run-in-band --verbose=2"
See all available options here.
Recast Options
Options to recast's printer can be provided
through jscodeshift's printOptions
command line argument
npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
Included scripts
v5.0.0
preset-safe
🚀 A combination of all important transformers for migrating v4 to v5. ⚠️ This codemod should be run only once.
npx @mui/codemod v5.0.0/preset-safe <path|folder>
The list includes these transformers
adapter-v4
autocomplete-rename-closeicon
autocomplete-rename-option
avatar-circle-circular
badge-overlap-value
box-borderradius-values
box-rename-css
box-rename-gap
button-color-prop
chip-variant-prop
circularprogress-variant
collapse-rename-collapsedheight
core-styles-import
create-theme
dialog-props
dialog-title-props
emotion-prepend-cache
expansion-panel-component
fab-variant
fade-rename-alpha
grid-justify-justifycontent
grid-list-component
icon-button-size
material-ui-styles
material-ui-types
modal-props
moved-lab-modules
pagination-round-circular
optimal-imports
root-ref
skeleton-variant
styled-engine-provider
table-props
tabs-scroll-buttons
textarea-minmax-rows
theme-augment
theme-breakpoints
theme-breakpoints-width
theme-options
theme-palette-mode
theme-provider
theme-spacing
theme-typography-round
transitions
use-autocomplete
use-transitionprops
with-mobile-dialog
with-width
mui-replace
adapter-v4
Imports and inserts adaptV4Theme
into createTheme
(or createMuiTheme
)
+import { adaptV4Theme } from '@material-ui/core/styles';
-createTheme({ palette: { ... }})
+createTheme(adaptV4Theme({ palette: { ... }}))
npx @mui/codemod v5.0.0/adapter-v4 <path>
You can find more details about this breaking change in the migration guide.
autocomplete-rename-closeicon
Renames Autocomplete
's closeIcon
prop to clearIcon
.
-<Autocomplete closeIcon={defaultClearIcon} />
+<Autocomplete clearIcon={defaultClearIcon} />
npx @mui/codemod v5.0.0/autocomplete-rename-closeicon <path>
You can find more details about this breaking change in the migration guide.
autocomplete-rename-option
Renames Autocomplete
's getOptionSelected
to isOptionEqualToValue
.
<Autocomplete
- getOptionSelected={(option, value) => option.title === value.title}
+ isOptionEqualToValue={(option, value) => option.title === value.title}
/>
npx @mui/codemod v5.0.0/autocomplete-rename-option <path>
You can find more details about this breaking change in the migration guide.
avatar-circle-circular
Updates the Avatar
's variant
value and classes
key from 'circle' to 'circular'.
-<Avatar variant="circle" />
-<Avatar classes={{ circle: 'className' }} />
+<Avatar variant="circular" />
+<Avatar classes={{ circular: 'className' }} />
npx @mui/codemod v5.0.0/avatar-circle-circular <path>
You can find more details about this breaking change in the migration guide.
badge-overlap-value
Renames 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 @mui/codemod v5.0.0/badge-overlap-value <path>
You can find more details about this breaking change in the migration guide.
box-borderradius-values
Updates the Box API from separate system props to sx
.
-<Box borderRadius="borderRadius">
-<Box borderRadius={16}>
+<Box borderRadius={1}>
+<Box borderRadius="16px">
npx @mui/codemod v5.0.0/box-borderradius-values <path>
You can find more details about this breaking change in the migration guide.
box-rename-css
Renames the Box css
prop to sx
-<Box css={{ m: 2 }}>
+<Box sx={{ m: 2 }}>
npx @mui/codemod v5.0.0/box-rename-css <path>
You can find more details about this breaking change in the migration guide.
box-rename-gap
Renames 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 @mui/codemod v5.0.0/box-rename-gap <path>
You can find more details about this breaking change in the migration guide.
button-color-prop
Removes the outdated color
prop values.
-<Button color="default">
+<Button>
npx @mui/codemod v5.0.0/button-color-prop <path>
You can find more details about this breaking change in the migration guide.
chip-variant-prop
Removes the Chip variant
prop if the value is "default"
.
-<Chip variant="default">
+<Chip>
npx @mui/codemod v5.0.0/chip-variant-prop <path>
You can find more details about this breaking change in the migration guide.
circularprogress-variant
Renames the CircularProgress static
variant to determinate
.
-<CircularProgress variant="static" classes={{ static: 'className' }} />
+<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
npx @mui/codemod v5.0.0/circularprogress-variant <path>
You can find more details about this breaking change in the migration guide.
collapse-rename-collapsedheight
Renames Collapse
's collapsedHeight
prop to collapsedSize
.
-<Collapse collapsedHeight={40} />
-<Collapse classes={{ container: 'collapse' }} />
+<Collapse collapsedSize={40} />
+<Collapse classes={{ root: 'collapse' }} />
npx @mui/codemod v5.0.0/collapse-rename-collapsedheight <path>
You can find more details about this breaking change in the migration guide.
component-rename-prop
A generic codemod to rename any component prop.
-<Component prop="value" />
-<Component prop />
+<Component newProp="value" />
+<Component newProp />
npx @mui/codemod v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp
core-styles-import
Renames 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 @mui/codemod v5.0.0/core-styles-import <path>
create-theme
Renames the function createMuiTheme
to createTheme
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
npx @mui/codemod v5.0.0/create-theme <path>
dialog-props
Remove disableBackdropClick
prop from <Dialog>
-<Dialog disableBackdropClick />
+<Dialog />
npx @mui/codemod v5.0.0/dialog-props <path>
You can find more details about this breaking change in the migration guide.
dialog-title-props
Remove disableTypography
prop from <DialogTitle>
-<DialogTitle disableTypography />
+<DialogTitle />
npx @mui/codemod v5.0.0/dialog-title-props <path>
You can find more details about this breaking change in the migration guide.
emotion-prepend-cache
Adds prepend: true
to emotion createCache
const cache = emotionCreateCache({
key: 'css',
+ prepend: true,
});
npx @mui/codemod v5.0.0/create-theme <path>
expansion-panel-component
Renames ExpansionPanel*
to Accordion*
npx @mui/codemod 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 @mui/codemod v5.0.0/fab-variant <path>
You can find more details about this breaking change in the migration guide.
fade-rename-alpha
Renames the fade
style utility import and calls 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 @mui/codemod v5.0.0/fade-rename-alpha <path>
You can find more details about this breaking change in the migration guide.
grid-justify-justifycontent
Renames Grid
's justify
prop to justifyContent
.
-<Grid justify="left">Item</Grid>
+<Grid item justifyContent="left">Item</Grid>
npx @mui/codemod v5.0.0/grid-justify-justifycontent <path>
You can find more details about this breaking change in the migration guide.
grid-list-component
Renames GridList*
to ImageList*
npx @mui/codemod v5.0.0/grid-list-component <path>
You can find more details about this breaking change in the migration guide.
icon-button-size
Adds size="large"
if size
is not defined to get the same appearance as v4.
-<IconButton size="medium" />
-<IconButton />
+<IconButton size="medium" />
+<IconButton size="large" />
npx @mui/codemod v5.0.0/icon-button-size <path>
You can find more details about this breaking change in the migration guide.
jss-to-styled
Replace JSS styling with makeStyles
or withStyles
to styled
API.
import Typography from '@material-ui/core/Typography';
-import makeStyles from '@material-ui/styles/makeStyles';
+import { styled } from '@material-ui/core/styles';
-const useStyles = makeStyles((theme) => ({
- root: {
- display: 'flex',
- alignItems: 'center',
- backgroundColor: theme.palette.primary.main
- },
- cta: {
- borderRadius: theme.shape.radius
- },
- content: {
- color: theme.palette.common.white,
- fontSize: 16,
- lineHeight: 1.7
- },
-}))
+const PREFIX = 'MyCard';
+const classes = {
+ root: `${PREFIX}-root`,
+ cta: `${PREFIX}-cta`,
+ content: `${PREFIX}-content`,
+}
+const Root = styled('div')((theme) => ({
+ [`&.${classes.root}`]: {
+ display: 'flex',
+ alignItems: 'center',
+ backgroundColor: theme.palette.primary.main
+ },
+ [`& .${classes.cta}`]: {
+ borderRadius: theme.shape.radius
+ },
+ [`& .${classes.content}`]: {
+ color: theme.palette.common.white,
+ fontSize: 16,
+ lineHeight: 1.7
+ },
+}))
export const MyCard = () => {
const classes = useStyles();
return (
- <div className={classes.root}>
+ <Root className={classes.root}>
<Typography className={classes.content}>...</Typography>
<Button className={classes.cta}>Go</Button>
+ </Root>
- </div>
)
}
npx @mui/codemod v5.0.0/jss-to-styled <path>
You can find more details about this breaking change in the migration guide.
Note: This approach converts the first element in the return statement into styled component but also increases CSS specificity to override nested children. This codemod should be adopted after handling all breaking changes, check out the migration documentation
link-underline-hover
Apply underline="hover"
to <Link />
that does not define underline
prop (to get the same behavior as in v4).
-<Link />
+<Link underline="hover" />
npx @mui/codemod v5.0.0/icon-button-size <path>
You can find more details about this breaking change in the migration guide.
material-ui-styles
Moves 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 @mui/codemod v5.0.0/material-ui-styles <path>
material-ui-types
Renames Omit
import from @material-ui/types
to DistributiveOmit
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
npx @mui/codemod v5.0.0/material-ui-types <path>
You can find more details about this breaking change in the migration guide.
modal-props
Removes disableBackdropClick
and onEscapeKeyDown
from <Modal>
<Modal
- disableBackdropClick
- onEscapeKeyDown={handleEscapeKeyDown}
/>
npx @mui/codemod v5.0.0/modal-props <path>
You can find more details about this breaking change in the migration guide.
moved-lab-modules
Updates 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 @mui/codemod v5.0.0/moved-lab-modules <path>
You can find more details about this breaking change in the migration guide.
pagination-round-circular
Renames Pagination*
's shape
values from 'round' to 'circular'.
-<Pagination shape="round" />
-<PaginationItem shape="round" />
+<Pagination shape="circular" />
+<PaginationItem shape="circular" />
npx @mui/codemod v5.0.0/pagination-round-circular <path>
You can find more details about this breaking change in the migration guide.
optimal-imports
Fix private import paths.
-import red from '@material-ui/core/colors/red';
-import createTheme from '@material-ui/core/styles/createTheme';
+import { red } from '@material-ui/core/colors';
+import { createTheme } from '@material-ui/core/styles';
npx @mui/codemod v5.0.0/optimal-imports <path>
root-ref
Removes RootRef
from the codebase.
npx @mui/codemod v5.0.0/root-ref <path>
You can find more details about this breaking change in the migration guide.
skeleton-variant
-<Skeleton variant="circle" />
-<Skeleton variant="rect" />
+<Skeleton variant="circular" />
+<Skeleton variant="rectangular" />
npx @mui/codemod v5.0.0/skeleton-variant <path>
You can find more details about this breaking change in the migration guide.
styled-engine-provider
Applies StyledEngineProvider
to the files that contains ThemeProvider
.
npx @mui/codemod v5.0.0/styled-engine-provider <path>
You can find more details about this breaking change in the migration guide.
table-props
Renames 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 @mui/codemod v5.0.0/table-props <path>
You can find more details about this breaking change in the migration guide.
tabs-scroll-buttons
Renames the Tabs
's scrollButtons
prop values.
-<Tabs scrollButtons="on" />
-<Tabs scrollButtons="desktop" />
-<Tabs scrollButtons="off" />
+<Tabs scrollButtons allowScrollButtonsMobile />
+<Tabs scrollButtons />
+<Tabs scrollButtons={false} />
npx @mui/codemod v5.0.0/tabs-scroll-buttons <path>
You can find more details about this breaking change in the migration guide.
textarea-minmax-rows
Renames TextField
's rows props.
-<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 @mui/codemod v5.0.0/textarea-minmax-rows <path>
You can find more details about this breaking change in the migration guide.
theme-augment
Adds DefaultTheme
module augmentation to typescript projects.
npx @mui/codemod v5.0.0/theme-augment <path>
You can find more details about this breaking change in the migration guide.
theme-breakpoints
Updates 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 @mui/codemod v5.0.0/theme-breakpoints <path>
You can find more details about this breaking change in the migration guide.
theme-breakpoints-width
Renames theme.breakpoints.width('md')
to theme.breakpoints.values.md
.
npx @mui/codemod 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 @mui/codemod v5.0.0/theme-options <path>
theme-palette-mode
Renames type
to mode
.
- { palette: { type: 'dark' } }
+ { palette: { mode: 'dark' } }
-theme.palette.type === 'dark'
+theme.palette.mode === 'dark'
npx @mui/codemod v5.0.0/theme-palette-mode <path>
You can find more details about this breaking change in the migration guide.
theme-provider
Renames MuiThemeProvider
to ThemeProvider
.
npx @mui/codemod v5.0.0/theme-provider <path>
You can find more details about this breaking change in the migration guide.
theme-spacing
Removes 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 @mui/codemod v5.0.0/theme-spacing <path>
You can find more details about this breaking change in the migration guide.
theme-typography-round
Renames theme.typography.round($number)
to Math.round($number * 1e5) / 1e5
.
-`${theme.typography.round($number)}`
+`${Math.round($number * 1e5) / 1e5}`
npx @mui/codemod v5.0.0/theme-typography-round <path>
You can find more details about this breaking change in the migration guide.
transitions
Renames import transitions
to createTransitions
npx @mui/codemod v5.0.0/transitions <path>
use-autocomplete
Renames useAutocomplete
related import from lab to core
-import useAutocomplete from '@material-ui/lab/useAutocomplete';
+import useAutocomplete from '@material-ui/core/useAutocomplete';
npx @mui/codemod v5.0.0/use-autocomplete <path>
use-transitionprops
Updates 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 @mui/codemod v5.0.0/use-transitionprops <path>
You can find more details about this breaking change in the migration guide.
variant-prop
Don't run this codemod if you already set
variant
tooutlined
orfilled
in theme default props.
Adds the TextField, Select, and FormControl's 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 @mui/codemod v5.0.0/variant-prop <path>
with-mobile-dialog
Removes imported withMobileDialog
, and inserts hardcoded version to prevent application crash.
- import withMobileDialog from '@material-ui/core/withMobileDialog';
+ // FIXME checkout https://mui.com/guides/migration-v4/#dialog
+ const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="lg" fullScreen={false} />;
npx @mui/codemod v5.0.0/with-mobile-dialog <path>
You can find more details about this breaking change in the migration guide.
with-width
Removes withWidth
import, and inserts hardcoded version to prevent application crash.
- import withWidth from '@material-ui/core/withWidth';
+ // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+ const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
npx @mui/codemod v5.0.0/with-width <path>
You can find more details about this breaking change in the migration guide.
mui-replace
Replace every occurrence of material-ui
related package with the new package names (listed below) except these packages (@material-ui/pickers
, @material-ui/data-grid
, @material-ui/x-grid
& @material-ui/x-grid-data-generator
). More details about why package names are changed
Material Design components
-import Alert from '@material-ui/core/Alert';
+import Alert from '@mui/material/Alert';
JSS styles package
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
System package
-import { SxProps } from '@material-ui/system';
+import { SxProps } from '@mui/system';
Utilities package
-import { deepmerge } from '@material-ui/utils';
+import { deepmerge } from '@mui/utils';
Lab
-import Mansory from '@material-ui/lab/Mansory';
+import Mansory from '@mui/lab/Mansory';
Dependencies
// package.json
-"@material-ui/core": "next",
-"@material-ui/icons": "next",
-"@material-ui/lab": "next",
-"@material-ui/unstyled": "next",
-"@material-ui/styled-engine-sc": "next",
+"@mui/material": "next",
+"@mui/icons-material": "next",
+"@mui/lab": "next",
+"@mui/base": "next",
+"@mui/styled-engine-sc": "next",
npx @mui/codemod v5.0.0/mui-replace <path>
You can find more details about this breaking change in the migration guide.
v4.0.0
theme-spacing-api
Updates 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 @mui/codemod 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-imports
Converts 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 @mui/codemod v4.0.0/optimal-imports <path>
Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.
top-level-imports
Converts 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 @mui/codemod v4.0.0/top-level-imports <path>
Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.
v1.0.0
import-path
Updates the import-paths
for the new location of the components.
MUI 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 @mui/codemod 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-imports
Updates the color-imports
for the new location of MUI 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 @mui/codemod v1.0.0/color-imports <path>
additional options
npx @mui/codemod v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
svg-icon-imports
Updates 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 @mui/codemod v1.0.0/svg-icon-imports <path>
menu-item-primary-text
Updates MenuItem
with primaryText
property making its value tag's child.
The diff should look like this:
-<MenuItem primaryText="Profile" />
-<MenuItem primaryText={"Profile" + "!"} />
+<MenuItem>Profile</MenuItem>
+<MenuItem>{"Profile" + "!"}</MenuItem>
npx @mui/codemod v1.0.0/menu-item-primary-text <path>
v0.15.0
import-path
Updates the import-paths
for the new location of the components.
MUI 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 @mui/codemod v0.15.0/import-path <path>