@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 codemod 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-circularoptimal-importsroot-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-v4Imports and inserts adaptV4Theme into 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 Autocomplete's closeIcon prop to clearIcon.
-<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 Autocomplete's 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'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 @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-variantRenames the CircularProgress 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-collapsedheightRenames Collapse's collapsedHeight prop to collapsedSize.
-<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-importRenames 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-themeRenames 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-cacheAdds 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-componentRenames 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 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 @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 Grid's justify prop to justifyContent.
-<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-componentRenames 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-sizeAdds 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 @material-ui/codemod@next v5.0.0/icon-button-size <path>
You can find more details about this breaking change in the migration guide.
jss-to-styledReplace 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 @material-ui/codemod@next 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-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-stylesMoves 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-circularRenames Pagination*'s shape values from 'round' to '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.
optimal-importsFix 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 @material-ui/codemod@next v5.0.0/optimal-imports <path>
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-buttonsRenames the Tabs's scrollButtons prop values.
-<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-rowsRenames 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 @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-augmentAdds DefaultTheme module augmentation to typescript projects.
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-widthRenames 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-modeRenames 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-providerRenames 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-roundRenames 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.
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 @material-ui/codemod@next v5.0.0/variant-prop <path>
with-mobile-dialogRemoves imported withMobileDialog, and inserts hardcoded version to prevent application crash.
- import withMobileDialog from '@material-ui/core/withMobileDialog';
+ // FIXME checkout https://next.material-ui.com/guides/migration-v4/#dialog
+ 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-widthRemoves withWidth import, and inserts hardcoded version 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>
@mui/joy@5.0.0-beta.45
FAQs
Codemod scripts for Material-UI.
The npm package @material-ui/codemod receives a total of 7,704 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.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.