Newtonian Physics Mockumentary

    @mui/codemod

    5.9.3 • Public • Published

    @mui/codemod

    Codemod scripts for MUI

    npm version npm downloads

    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

    date-pickers-moved-to-x

    Rename the imports of date and time pickers from @mui/lab to @mui/x-date-pickers and @mui/x-date-pickers-pro.

    npx @mui/codemod v5.0.0/date-pickers-moved-to-x <path>

    🚀 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

    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.

    jss-to-tss-react

    Migrate JSS styling with makeStyles or withStyles to the corresponding tss-react API.

    -import clsx from 'clsx';
    -import {makeStyles, createStyles} from '@material-ui/core/styles';
    +import { makeStyles } from 'tss-react/mui';
    
    -const useStyles = makeStyles((theme) => createStyles<
    -  'root' | 'small' | 'child', {color: 'primary' | 'secondary', padding: number}
    ->
    -({
    -  root: ({color, padding}) => ({
    +const useStyles = makeStyles<{color: 'primary' | 'secondary', padding: number}, 'child' | 'small'>({name: 'App'})((theme, { color, padding }, classes) => ({
    +  root: {
         padding: padding,
    -    '&:hover $child': {
    +    [`&:hover .${classes.child}`]: {
           backgroundColor: theme.palette[color].main,
         }
    -  }),
    +  },
       small: {},
       child: {
         border: '1px solid black',
         height: 50,
    -    '&$small': {
    +    [`&.${classes.small}`]: {
           height: 30
         }
       }
    -}), {name: 'App'});
    +}));
    
     function App({classes: classesProp}: {classes?: any}) {
    -  const classes = useStyles({color: 'primary', padding: 30, classes: classesProp});
    +  const { classes, cx } = useStyles({
    +    color: 'primary',
    +    padding: 30
    +  }, {
    +    props: {
    +      classes: classesProp
    +    }
    +  });
    
       return (
         <div className={classes.root}>
           <div className={classes.child}>
             The Background take the primary theme color when the mouse hovers the parent.
           </div>
    -      <div className={clsx(classes.child, classes.small)}>
    +      <div className={cx(classes.child, classes.small)}>
             The Background take the primary theme color when the mouse hovers the parent.
             I am smaller than the other child.
           </div>
        </div>
      );
    }
    
    export default App;
    npx @mui/codemod v5.0.0/jss-to-tss-react <path>

    The following scenarios are not currently handled by this codemod and will be marked with a "TODO jss-to-tss-react codemod" comment:

    • If the hook returned by makeStyles (e.g. useStyles) is exported and used in another file, the usages in other files will not be converted.
    • Arrow functions as the value for a CSS prop will not be converted. Arrow functions are supported at the rule level, though with some caveats listed below.
    • In order for arrow functions at the rule level to be converted, the parameter must use object destructuring (e.g. root: ({color, padding}) => (...)). If the parameter is not destructured (e.g. root: (props) => (...)), it will not be converted.
    • If an arrow function at the rule level contains a code block (i.e. contains an explicit return statement) rather than just an object expression, it will not be converted.

    You can find more details about migrating from JSS to tss-react in the migration guide.

    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/link-underline-hover <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.

    top-level-imports

    Converts all @mui/material submodule imports to the root module:

    -import List from '@mui/material/List';
    -import Grid from '@mui/material/Grid';
    +import { List, Grid } from '@mui/material';
    npx @mui/codemod v5.0.0/top-level-imports <path>

    Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.

    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 to outlined or filled 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/material-ui/migration/v5-component-changes/#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>

    Install

    npm i @mui/codemod

    DownloadsWeekly Downloads

    6,215

    Version

    5.9.3

    License

    MIT

    Unpacked Size

    538 kB

    Total Files

    299

    Last publish

    Collaborators

    • oliviertassinari
    • mbrookes
    • hbjorbj
    • siriwatknp
    • mnajdova
    • michaldudak