Переход с v4 на v5

Yeah, v5 has been released!

If you're looking for the v4 docs, you can find them here.

Этот документ пока находится в стадии разработки. If you have upgraded your site and run into something that's not covered here, please add your changes on GitHub.

Вступление

This is a reference for upgrading your site from Material-UI v4 to v5. While there's a lot covered here, you probably won't need to do everything. We'll do our best to keep things easy to follow, and as sequential as possible, so you can quickly get rocking on v5!

Why you should migrate

This documentation page covers the how of migrating from v4 to v5. The why is covered in the release blog post on Medium.

Updating your dependencies

The very first thing you will need to do is to update your dependencies.

Update Material-UI version

You need to update your package.json to use the latest version of Material-UI and its peer dependencies.

"dependencies": {
  "@emotion/react": "^11.0.0",
  "@emotion/styled": "^11.0.0",
  "@material-ui/core": "^5.0.0"
}

Or run

npm install @material-ui/core@next @emotion/react @emotion/styled

or

yarn add @material-ui/core@next @emotion/react @emotion/styled

Handling breaking changes

Поддерживаемые версии браузеров и node

Изменены целевые версии для базового пакета. Конкретные версии базового пакета будут уточнены на момент релиза по результатам следующего browserslist-запроса "> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11, maintained node versions".

The default bundle supports the following minimum versions:

Node 12 (не ниже 8)
Chrome 84 (не ниже 49)
Edge 85 (не ниже 14)
Firefox 78 (не ниже 52)
Safari 13 (macOS) и 12.2 (iOS) (не ниже 10)
и так далее (см. .browserslistrc (раздел stable))

IE 11 больше не поддерживается. Если вам нужна поддержка IE 11, воспользуйтесь устаревшим пакетом.

non-ref-forwarding class components

Support for non-ref-forwarding class components in the component prop or as immediate children has been dropped. If you were using unstable_createStrictModeTheme or didn't see any warnings related to findDOMNode in React.StrictMode then you don't need to do anything. Otherwise check out the "Caveat with refs" section in our composition guide to find out how to migrate. This change affects almost all components where you're using the component prop or passing children to components that require children to be elements (e.g. <MenuList><CustomMenuItem /></MenuList>)

Supported React version

The minimum supported version of React was increased from v16.8.0 to v17.0.0.

Supported TypeScript version

The minimum supported version of TypeScript was increased from v3.2 to v3.5. We try to align with types released from DefinitelyTyped (i.e. packages published on npm under the @types namespace). We will not change the minimum supported version in a major version of Material-UI. However, we generally recommend to not use a TypeScript version older than the lowest supported version of DefinitelyTyped

Style library

The style library used by default in v5 is emotion. While migrating from JSS to emotion, and if you are using JSS style overrides for your components (for example overrides created by makeStyles), you will need to take care of the CSS injection order. To do so, you need to have the StyledEngineProvider with the injectFirst option at the top of your component tree. Here is an example:

import * as React from 'react';
import { StyledEngineProvider } from '@material-ui/core/styles';

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
      {/* Your component tree. import * as React from 'react';
import { StylesProvider } from '@material-ui/core';

export default function GlobalCssPriority() {
  return (
    <StylesProvider injectFirst>
      {/* Your component tree. */}
    </StylesProvider>
  );
}

Note: If you are using emotion to style your app, and have a custom cache, it will override the one provided by Material-UI. In order for the injection order to still be correct, you need to add the prepend option to createCache. Here is an example:

import * as React from 'react';
import { StylesProvider } from '@material-ui/core';

export default function GlobalCssPriority() {
  return (
    <StylesProvider injectFirst>
      {/* Your component tree. import * as React from 'react';
import { StylesProvider } from '@material-ui/core';

export default function GlobalCssPriority() {
  return (
    <StylesProvider injectFirst>
      {/* Your component tree. */}
    </StylesProvider>
  );
}

Note: If you are using styled-components and have StyleSheetManager with a custom target, make sure that the target is the first element in the HTML <head>. To see how it can be done, take a look at the StyledEngineProvider implementation in the @material-ui/styled-engine-sc package.

Темы

The function createMuiTheme was renamed to createTheme to make more intuitive to use with ThemeProvider.

-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';

-const theme = createMuiTheme({
+const theme = createTheme({

The default background color is now #fff in light mode and #121212 in dark mode. This matches the Material Design guidelines.
Breakpoints are now treated as values instead of ranges. The behavior of down(key) was changed to define a media query below the value defined by the corresponding breakpoint (exclusive), rather than the breakpoint above. between(start, end) was also updated to define a media query for the values between the actual values of start (inclusive) and end (exclusive). When using the down() breakpoints utility you need to update the breakpoint key by one step up. When using the between(start, end) the end breakpoint should also be updated by one step up.

Here are some examples of the changes required:
```
-theme.breakpoints.down('sm') // '@media (max-width:959.95px)' - [0, sm + 1) => [0, md)
+theme.breakpoints.down('md') // '@media (max-width:959.95px)' - [0, md)
```
```
-theme.breakpoints.between('sm', 'md') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, md + 1) => [0, lg)
+theme.breakpoints.between('sm', 'lg') // '@media (min-width:600px) and (max-width:1279.95px)' - [0, lg)
```
```
-theme.breakpoints.between('sm', 'xl') // '@media (min-width:600px)'
+theme.breakpoints.up('sm') // '@media (min-width:600px)'
```
You can use the theme-breakpoints codemod for automatic migration of theme.breakpoints.

The same should be done when using the Hidden component:
```
-<Hidden smDown>{...}</Hidden> // '@media (min-width:600px)'
+<Hidden mdDown>{...}</Hidden> // '@media (min-width:600px)'
```
The theme.breakpoints.width utility was removed because it's redundant. Use theme.breakpoints.values to get the same values.
```
-theme.breakpoints.width('md')
+theme.breakpoints.values.md
```

The signature of theme.palette.augmentColor helper has changed:

-theme.palette.augmentColor(red);
+theme.palette.augmentColor({ color: red, name: 'brand' });

The theme.typography.round helper was removed because it was no longer used. If you need it, use the function below:
```
function round(value) {
  return Math.round(value * 1e5) / 1e5;
}
```

The default breakpoints were changed to better match the common use cases. They also better match the Material Design guidelines. Read more about the change

{
  xs: 0,
  sm: 600,
- md: 960,
+ md: 900,
- lg: 1280,
+ lg: 1200,
- xl: 1920,
+ xl: 1536,
}

If you prefer the old breakpoint values, use the snippet below.

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
});

Upgrade helper

For a smoother transition, the adaptV4Theme helper allows you to iteratively upgrade to the new theme structure.

-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme, adaptV4Theme } from '@material-ui/core/styles';

-const theme = createMuiTheme({
+const theme = createTheme(adaptV4Theme({
  // v4 theme
-});
+}));

Supported changes

The following changes are supported by the adapter:

The "gutters" abstraction hasn't proven to be used frequently enough to be valuable.

-theme.mixins.gutters(),
+paddingLeft: theme.spacing(2),
+paddingRight: theme.spacing(2),
+[theme.breakpoints.up('sm')]: {
+  paddingLeft: theme.spacing(3),
+  paddingRight: theme.spacing(3),
+},

theme.spacing now returns single values with px units by default. This change improves the integration with styled-components & emotion.

Before:
```
theme.spacing(2) => 16
```
After:
```
theme.spacing(2) => '16px'
```
You can use the theme-spacing codemod to remove any 'px' suffix from theme.spacing calls in a template string.

The theme.palette.type key was renamed to theme.palette.mode, to better follow the "dark mode" term that is usually used for describing this feature.

import { createTheme } from '@material-ui/core/styles';
-const theme = createTheme({palette: { type: 'dark' }}),
+const theme = createTheme({palette: { mode: 'dark' }}),

The theme.palette.text.hint key was unused in Material-UI components, and has been removed. If you depend on it, you can add it back:

import { createTheme } from '@material-ui/core/styles';

-const theme = createTheme(),
+const theme = createTheme({
+  palette: { text: { hint: 'rgba(0, 0, 0, 0.38)' } },
+});

The components' definitions in the theme were restructure under the components key, to allow for easier discoverability of the definitions related to any one component.

props

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
-  props: {
-    MuiButton: {
-      disableRipple: true,
-    },
-  },
+  components: {
+    MuiButton: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+  },
});

переопределение

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
-  overrides: {
-    MuiButton: {
-      root: { padding: 0 },
-    },
-  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: { padding: 0 },
+      },
+    },
+  },
});

Стили

Renamed fade to alpha to better describe its functionality. The previous name was leading to confusion when the input color already had an alpha value. The helper overrides the alpha value of the color.

- import { fade } from '@material-ui/core/styles';
+ import { alpha } from '@material-ui/core/styles';

const classes = makeStyles(theme => ({
-  backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+  backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
}));

You can use the fade-rename-alpha codemod for automatic migration.

The createStyles function from @material-ui/core/styles was moved to the one exported from @material-ui/styles. It is necessary for removing the dependency to @material-ui/styles in the core package.

-import { createStyles } from '@material-ui/core/styles';
+import { createStyles } from '@material-ui/styles';

Система

The following system functions (and properties) were renamed because they are considered deprecated CSS:
1. gridGap to gap
2. gridRowGap to rowGap
3. gridColumnGap to columnGap
Use spacing unit in gap, rowGap, and columnGap. If you were using a number previously, you need to mention the px to bypass the new transformation with theme.spacing.
```
<Box
- gap={2}
+ gap="2px"
>
```
Replace css prop with sx to avoid collision with styled-components & emotion css prop.
```
-<Box css={{ color: 'primary.main' }} />
+<Box sx={{ color: 'primary.main' }} />
```
Note that the system grid function wasn't documented in v4.

Core components

As the core components use emotion as their style engine, the props used by emotion are not intercepted. The prop as in the following code snippet will not be propagated to SomeOtherComponent.

<MuiComponent component={SomeOtherComponent} as="button" />

AppBar

Remove z-index when position static and relative. This avoids the creation of a stacking context and rendering issues.
The color prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the Material Design guidelines. Use enableColorOnDark to restore the behavior of v4.
```
<AppBar enableColorOnDark />
```

Alert

Перемещаем компонент из lab в core. Компонент теперь стабилен.

-import Alert from '@material-ui/lab/Alert';
-import AlertTitle from '@material-ui/lab/AlertTitle';
+import Alert from '@material-ui/core/Alert';
+import AlertTitle from '@material-ui/core/AlertTitle';

You can use the moved-lab-modules codemod for automatic migration.

Autocomplete (Автодополнение)

Перемещаем компонент из lab в core. Компонент теперь стабилен.

-import Autocomplete from '@material-ui/lab/Autocomplete';
-import useAutocomplete  from '@material-ui/lab/useAutocomplete';
+import Autocomplete from '@material-ui/core/Autocomplete';
+import useAutoComplete from '@material-ui/core/useAutocomplete';

You can use the moved-lab-modules codemod for automatic migration.

Remove debug prop. There are a couple of simpler alternatives: open={true}, Chrome devtools "Emulate focused", or React devtools prop setter.

renderOption should now return the full DOM structure of the option. It makes customizations easier. You can recover from the change with:

<Autocomplete
- renderOption={(option, { selected }) => (
-   <React.Fragment>
+ renderOption={(props, option, { selected }) => (
+   <li {...props}>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.title}
-   </React.Fragment>
+   </li>
  )}
/>

Rename closeIcon prop to clearIcon to avoid confusion.
```
-<Autocomplete closeIcon={defaultClearIcon} />
+<Autocomplete clearIcon={defaultClearIcon} />
```
You can use the autocomplete-rename-closeicon codemod for automatic migration.
The following values of the reason argument in onChange and onClose were renamed for consistency:
1. create-option to createOption
2. select-option to selectOption
3. remove-option to removeOption
Change the CSS rules that use [data-focus="true"] to use .Mui-focused. The data-focus attribute is not set on the focused option anymore, instead, global class names are used.
```
-'.MuiAutocomplete-option[data-focus="true"]': {
+'.MuiAutocomplete-option.Mui-focused': {
```

Rename getOptionSelected to isOptionEqualToValue to better describe its purpose.

<Autocomplete
- getOptionSelected={(option, value) => option.title === value.title}
+ isOptionEqualToValue={(option, value) => option.title === value.title}

Avatar

Переименовываем circle в circular для единообразия:
```
-<Avatar variant="circle">
-<Avatar classes={{ circle: 'className' }}>
+<Avatar variant="circular">
+<Avatar classes={{ circular: 'className' }}>
```
Since circular is the default value, the variant prop can be deleted:
```
-<Avatar variant="circle">
+<Avatar>
```
You can use the avatar-circle-circular codemod for automatic migration.

Move the AvatarGroup from the lab to the core.

-import AvatarGroup from '@material-ui/lab/AvatarGroup';
+import AvatarGroup from '@material-ui/core/AvatarGroup';

You can use the moved-lab-modules codemod for automatic migration.

Badge

Переименовываем circle в circular и rectangle в rectangular для единообразия.

-<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',
}}>

You can use the badge-overlap-value codemod for automatic migration.

BottomNavigation

TypeScript: тип параметра event в onChange теперь не React.ChangeEvent а React.SyntheticEvent.

-<BottomNavigation onChange={(event: React.ChangeEvent<{}>) => {}} />
+<BottomNavigation onChange={(event: React.SyntheticEvent) => {}} />

Box

The borderRadius system prop value transformation has been changed. If it receives a number, it multiplies this value with the theme.shape.borderRadius value. Use a string to provide an explicit px value.
```
-<Box borderRadius="borderRadius">
+<Box borderRadius={1}>
```
```
-<Box borderRadius={16}>
+<Box borderRadius="16px">
```
You can use the box-borderradius-values codemod for automatic migration.
The Box system props have an optional alternative API in v5, using the sx prop. You can read this section for the "why" behind this new API.
```
-<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
+<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>
```
If you prefer the new syntax, you can use the box-sx-prop codemod for automatic migration.
The following properties have been renamed because they are considered deprecated CSS properties by the CSS specification:
1. gridGap to gap
2. gridColumnGap to columnGap
3. gridRowGap to rowGap
```
-<Box gridGap={1}>
-<Box gridColumnGap={2}>
-<Box gridRowGap={3}>
+<Box gap={1}>
+<Box columnGap={2}>
+<Box rowGap={3}>
```
(Note that the system grid function wasn't documented in v4.)

You can use the box-rename-gap codemod for automatic migration.

The clone prop was removed because its behavior can be obtained by applying the sx prop directly to the child if it is a Material-UI component.

-<Box sx={{ border: '1px dashed grey' }} clone>
-  <Button>Save</Button>
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>

The ability to pass a render prop was removed because its behavior can be obtained by applying the sx prop directly to the child if it is a Material-UI component.

-<Box sx={{ border: '1px dashed grey' }}>
-  {(props) => <Button {...props}>Save</Button>}
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>

For non-Material-UI components, use the component prop.

-<Box sx={{ border: '1px dashed grey' }}>
-  {(props) => <button {...props}>Save</button>}
-</Box>
+<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>

Button

Свойство color у кнопки теперь "primary" по умолчанию, а опция "default" удалена. This makes the button closer to the Material Design guidelines and simplifies the API.
```
-<Button color="primary">
-<Button color="default">
+<Button>
+<Button>
```
You can use the button-color-prop codemod for automatic migration.
span element that wraps children has been removed. label classKey is also removed. More details about this change.
```
<button class="MuiButton-root">
- <span class="MuiButton-label">
    children
- </span>
</button>
```

Chip

Переименовываем вариант default на filled для единообразия.

Since filled is the default value, the variant prop can be deleted:
```
-<Chip variant="default">
+<Chip>
```
You can use the chip-variant-prop codemod for automatic migration.

Checkbox

The component doesn't have .MuiIconButton-root and .MuiIconButton-label class names anymore, target .MuiButtonBase-root instead.

- <span class="MuiIconButton-root MuiButtonBase-root MuiCheckbox-root PrivateSwitchBase-root">
-   <span class="MuiIconButton-label">
-     <input class="PrivateSwitchBase-input">
+ <span class="MuiButtonBase-root MuiCheckbox-root PrivateSwitchBase-root">
+   <span class="PrivateSwitchBase-input">

Групповой прогресс

The static variant has been renamed to determinate, and the previous appearance of determinate has been replaced by that of static. Это было исключением из Material Design и удалено из спецификации.
```
<CircularProgress variant="static" classes={{ static: 'className' }} />
+<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
```

You can use the circularprogress-variant codemod for automatic migration.

NB: If you had previously customized determinate, your customizations are probably no longer valid. Please remove them.

Collapse

Свойство collapsedHeight переименовано в collapsedSize для поддержки горизонтального направления.
```
-<Collapse collapsedHeight={40}>
+<Collapse collapsedSize={40}>
```
Ключ classes.container был изменен для соответствия соглашениям других компонентов.
```
-<Collapse classes={{ container: 'collapse' }}>
+<Collapse classes={{ root: 'collapse' }}>
```

You can use the collapse-rename-collapsedheight codemod for automatic migration of both the prop and the classes key.

CssBaseline

The component was migrated to use the @material-ui/styled-engine (emotion or styled-components) instead of jss. You should remove the @global key when defining the style overrides for it. You could also start using the CSS template syntax over the JavaScript object syntax.

const theme = createTheme({
  components: {
    MuiCssBaseline: {
-      styleOverrides: {
-       '@global': {
-          html: {
-            WebkitFontSmoothing: 'auto',
-          },
-       },
-      },
+     styleOverrides: `
+       html {
+         -webkit-font-smoothing: auto;
+       }
+     `
    },
  },
});

The body font size has changed from theme.typography.body2 (0.875rem) to theme.typography.body1 (1rem). To return to the previous size, you can override it in the theme:
```
const theme = createTheme({
  typography: {
    body1: {
      fontSize: '0.875rem',
    },
  },
});
```
(Note that this will also affect use of the Typography component with the default body1 variant).

Dialog

Свойства onE* transition были удалены. Используйте вместо них TransitionProps.

<Dialog
-  onEnter={onEnter}
-  onEntered={onEntered}
-  onEntering={onEntering}
-  onExit={onExit}
-  onExited={onExited}
-  onExiting={onExiting}
+  TransitionProps={{
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+  }}
/>

You can use the use-transitionprops codemod for automatic migration.

Remove the disableBackdropClick prop because it is redundant. Ignore close events from onClose when reason === 'backdropClick' instead.

<Dialog
- disableBackdropClick
- onClose={handleClose}
+ onClose={(event, reason) => {
+   if (reason !== 'backdropClick') {
+     onClose(event, reason);
+   }
+ }}
/>

Remove the withMobileDialog higher-order component. The hook API allows a simpler and more flexible solution:

-import withMobileDialog from '@material-ui/core/withMobileDialog';
+import { useTheme, useMediaQuery } from '@material-ui/core';

function ResponsiveDialog(props) {
- const { fullScreen } = props;
+ const theme = useTheme();
+ const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const [open, setOpen] = React.useState(false);

// ...

-export default withMobileDialog()(ResponsiveDialog);
+export default ResponsiveDialog;

Flatten DialogTitle DOM structure, remove disableTypography prop

-<DialogTitle disableTypography>
-  <Typography variant="h4" component="h2">
+<DialogTitle>
+  <Typography variant="h4" component="span">
     My header
   </Typography>

Divider

Используем рамку вместо цвета фона. Это предотвращает колебания высоты на масштабированных экранах. If you have customized the color of the border, you will need to update the CSS property override:
```
.MuiDivider-root {
- background-color: #f00;
+ border-color: #f00;
}
```

ExpansionPanel

Переименовываем компоненты ExpansionPanel в Accordion для соответствия наиболее распространенным соглашениям:

-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionActions from '@material-ui/core/AccordionActions';

-<ExpansionPanel>
+<Accordion>
-  <ExpansionPanelSummary>
+  <AccordionSummary>
     <Typography>Location</Typography>
     <Typography>Select trip destination</Typography>
-  </ExpansionPanelSummary>
+  </AccordionSummary>
-  <ExpansionPanelDetails>
+  <AccordionDetails>
     <Chip label="Barbados" onDelete={() => {}} />
     <Typography variant="caption">Select your destination of choice</Typography>
-  </ExpansionPanelDetails>
+  </AccordionDetails>
   <Divider />
-  <ExpansionPanelActions>
+  <AccordionActions>
     <Button size="small">Cancel</Button>
     <Button size="small">Save</Button>
-  </ExpansionPanelActions>
+  </AccordionActions>
-</ExpansionPanel>
+</Accordion>

TypeScript: тип параметра event в onChange теперь не React.ChangeEvent а React.SyntheticEvent.

-<Accordion onChange={(event: React.ChangeEvent<{}>, expanded: boolean) => {}} />
+<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />

Переименовываем focused в focusVisible для единообразия:

<Accordion
  classes={{
-    focused: 'custom-focus-visible-classname',
+    focusVisible: 'custom-focus-visible-classname',
  }}
/>

Удаляем display: flex из AccordionDetails, так как он навязывает определенный вид компоновки. Most developers expect a display block.
Удаляем свойство IconButtonProps из AccordionSummary. При отрисовке этого компонента вместо IconButton используется элемент <div>. Данное свойство больше не требуется.

Fab

Rename round to circular for consistency:

-<Fab variant="round">
+<Fab variant="circular">

FormControl

Change the default variant from standard to outlined. Standard has been removed from the Material Design guidelines.

-<FormControl value="Standard" />
-<FormControl value="Outlined" variant="outlined" />
+<FormControl value="Standard" variant="standard" />
+<FormControl value="Outlined" />

This codemod will automatically update your code.

Grid

Rename justify prop to justifyContent to align with the CSS property name.
```
-<Grid justify="center">
+<Grid justifyContent="center">
```
You can use the component-rename-prop codemod for automatic migration.
The props: alignItems alignContent and justifyContent and their classes and style overrides keys were removed: "align-items-xs-center", "align-items-xs-flex-start", "align-items-xs-flex-end", "align-items-xs-baseline", "align-content-xs-center", "align-content-xs-flex-start", "align-content-xs-flex-end", "align-content-xs-space-between", "align-content-xs-space-around", "justify-content-xs-center", "justify-content-xs-flex-end", "justify-content-xs-space-between", "justify-content-xs-space-around" and "justify-content-xs-space-evenly". These props are now considered part of the system, not on the Grid component itself. If you still wish to add overrides for them, you can use the theme.components.MuiGrid.variants options. For example
```
const theme = createTheme({
  components: {
    MuiGrid: {
-     styleOverrides: {
-       "align-items-xs-flex-end": {
-         marginTop: '20px',
-       },
-     },
+     variants: {
+       props: { alignItems: "flex-end" },
+       style: {
+         marginTop: '20px',
+       },
+     }],
    },
  },
});
```
You can use the grid-justify-justifycontent codemod for automatic migration.

GridList

Переименовываем компоненты GridList на ImageList для согласованности с текущими наименованиями Material Design.
Переименовываем GridList свойство spacing на gap для соответствия CSS атрибуту.
Rename the GridList cellHeight prop to rowHeight.
Добавляем в GridList свойство variant.
Переименовываем GridListItemBar свойство actionPosition в position. (Обратите внимание, что соответствующее имя класса также изменяется.)

Используем CSS object-fit. For IE11 support either use a polyfill such as https://www.npmjs.com/package/object-fit-images, or continue to use the v4 component.

-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-import GridListTileBar from '@material-ui/core/GridListTileBar';
+import ImageList from '@material-ui/core/ImageList';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';

-<GridList spacing={8} cellHeight={200}>
-  <GridListTile>
+<ImageList gap={8} rowHeight={200}>
+  <ImageListItem>
    <img src="file.jpg" alt="Image title" />
-    <GridListTileBar
+    <ImageListItemBar
      title="Title"
      subtitle="Subtitle"
    />
-  </GridListTile>
-</GridList>
+  </ImageListItem>
+</ImageList>

Hidden

This component was removed because its functionality can be created with the sx prop or the useMediaQuery hook.

Use the sx prop to replace implementation="css":

-<Hidden implementation="css" xlUp><Paper /></Hidden>
-<Hidden implementation="css" xlUp><button /></Hidden>
+<Paper sx={{ display: { xl: 'none', xs: 'block' } }} />
+<Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} />

-<Hidden implementation="css" mdDown><Paper /></Hidden>
-<Hidden implementation="css" mdDown><button /></Hidden>
+<Paper sx={{ display: { xs: 'none', md: 'block' } }} />
+<Box component="button" sx={{ display: { xs: 'none', md: 'block' } }} />

Use the useMediaQuery hook to replace implementation="js":

-<Hidden implementation="js" xlUp><Paper /></Hidden>
+const hidden = useMediaQuery(theme => theme.breakpoints.up('xl'));
+return hidden ? null : <Paper />;

Icon

The default value of fontSize was changed from default to medium for consistency. In the unlikely event that you were using the value default, the prop can be removed:
```
-<Icon fontSize="default">icon-name</Icon>
+<Icon>icon-name</Icon>
```

IconButton

The default size's padding is reduced to 8px which makes the default IconButton size of 40px. To get the old default size (48px), use size="large". The change was done to better match Google's products when Material Design stopped documenting the icon button pattern.
```
- <IconButton>
+ <IconButton size="large">
```

span element that wraps children has been removed. label classKey is also removed. More details about this change.

<button class="MuiIconButton-root">
- <span class="MuiIconButton-label">
    <svg />
- </span>
</button>

Свойства onE* transition были удалены. Используйте вместо них TransitionProps.

<Menu
-  onEnter={onEnter}
-  onEntered={onEntered}
-  onEntering={onEntering}
-  onExit={onExit}
-  onExited={onExited}
-  onExiting={onExiting}
+  TransitionProps={{
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+  }}
>

Note: The selectedMenu variant will no longer vertically align the selected item with the anchor.

You can use the use-transitionprops codemod for automatic migration.

Change the default value of anchorOrigin.vertical to follow the Material Design guidelines. The menu now displays below the anchor instead of on top of it. Вы можете восстановить прежнее поведение с помощью:
```
 <Menu
+  anchorOrigin={{
+    vertical: 'top',
+    horizontal: 'left',
+  }}
```

MenuItem

The MenuItem component inherits the ButtonBase component instead of ListItem. The class names related to "MuiListItem-*" are removed and theming ListItem is no longer affecting MenuItem.
```
-<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
+<li className="MuiButtonBase-root MuiMenuItem-root">
```
prop listItemClasses is removed, use classes instead.
```
-<MenuItem listItemClasses={{...}}>
+<MenuItem classes={{...}}>
```
Read more about MenuItem CSS API

Remove the disableBackdropClick prop because it is redundant. Use onClose with reason === 'backdropClick' instead.

<Modal
- disableBackdropClick
- onClose={handleClose}
+ onClose={(event, reason) => {
+   if (reason !== 'backdropClick') {
+     onClose(event, reason);
+   }
+ }}
/>

Remove the onEscapeKeyDown prop because it is redundant. Use onClose with reason === "escapeKeyDown" instead.

<Modal
- onEscapeKeyDown={handleEscapeKeyDown}
+ onClose={(event, reason) => {
+   if (reason === 'escapeKeyDown') {
+     handleEscapeKeyDown(event);
+   }
+ }}
/>

Удаляем свойство onRendered. В зависимости от варианта использования либо используйте обратную ссылку на дочерний элемент либо хук эффекта в дочернем компоненте.

NativeSelect

Merge the selectMenu slot into select. Slot selectMenu was redundant. The root slot is no longer applied to the select, but to the root.

-<NativeSelect classes={{ root: 'class1', select: 'class2', selectMenu: 'class3' }} />
+<NativeSelect classes={{ select: 'class1 class2 class3' }} />

OutlinedInput

Remove the labelWidth prop. The label prop now fulfills the same purpose, using CSS layout instead of JavaScript measurement to render the gap in the outlined.
```
-<OutlinedInput labelWidth={20} />
+<OutlinedInput label="First Name" />
```

Paper

Change the background opacity based on the elevation in dark mode. This change was done to follow the Material Design guidelines. You can revert it in the theme:

const theme = createTheme({
  components: {
    MuiPaper: {
+     styleOverrides: { root: { backgroundImage: 'unset' } },
    },
  },
});

Pagination

Перемещаем компонент из lab в core. Компонент теперь стабилен.

-import Pagination from '@material-ui/lab/Pagination';
-import PaginationItem from '@material-ui/lab/PaginationItem';
-import { usePagination } from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
+import PaginationItem from '@material-ui/core/PaginationItem';
+import usePagination from '@material-ui/core/usePagination';

You can use the moved-lab-modules codemod for automatic migration.

Rename round to circular for consistency:

-<Pagination shape="round">
-<PaginationItem shape="round">
+<Pagination shape="circular">
+<PaginationItem shape="circular">

Свойства onE* transition были удалены. Используйте вместо них TransitionProps.

<Popover
-  onEnter={onEnter}
-  onEntered={onEntered}
-  onEntering={onEntering}
-  onExit={onExit}
-  onExited={onExited}
-  onExiting={onExiting}
+  TransitionProps={{
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+  }}
/>

You can use the use-transitionprops codemod for automatic migration.

The getContentAnchorEl prop was removed to simplify the positioning logic.

Popper

Upgrade Popper.js from v1 to v2. This third-party library has introduced a lot of changes.
You can read their migration guide or the following summary:
- The CSS prefixes have changed:
```
popper: {
  zIndex: 1,
- '&[x-placement*="bottom"] $arrow': {
+ '&[data-popper-placement*="bottom"] $arrow': {
```
- Method names have changed:
```
-popperRef.current.scheduleUpdate()
+popperRef.current.update()
```
```
-popperRef.current.update()
+popperRef.current.forceUpdate()
```
- Modifiers' API has changed a lot. There are too many changes to be covered here.

Portal

Удаляем свойство onRendered. В зависимости от варианта использования либо используйте обратную ссылку на дочерний элемент либо хук эффекта в дочернем компоненте.

Радиокнопка

The radio color prop is now "primary" by default. To continue using the "secondary" color, you must explicitly indicate secondary. This brings the radio closer to the Material Design guidelines.
```
-<Radio />
+<Radio color="secondary />
```

The component doesn't have .MuiIconButton-root and .MuiIconButton-label class names anymore, target .MuiButtonBase-root instead.

- <span class="MuiIconButton-root MuiButtonBase-root MuiRadio-root PrivateSwitchBase-root">
-   <span class="MuiIconButton-label">
-     <input class="PrivateSwitchBase-input">
+ <span class="MuiButtonBase-root MuiRadio-root PrivateSwitchBase-root">
+   <span class="PrivateSwitchBase-input">

Rating

Перемещаем компонент из lab в core. Компонент теперь стабилен.
```
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
```
You can use the moved-lab-modules codemod for automatic migration.
Чтобы улучшить доступность изменяем используемую по умолчанию пустую иконку. Если у вас есть свой значок (icon), но нет пустого значка (emptyIcon), вы можете восстановить прежнее поведение с помощью:
```
<Rating
  icon={customIcon}
+ emptyIcon={null}
/>
```

Переименовываем visuallyhidden в visuallyHidden для единообразия:

<Rating
  classes={{
-    visuallyhidden: 'custom-visually-hidden-classname',
+    visuallyHidden: 'custom-visually-hidden-classname',
  }}
/>

RootRef

Этот компонент был удален. Ссылку на лежащий в основе наших компонентов DOM узел вы можете получить через ref. Компонент основывался на ReactDOM.findDOMNode, использование которого порицается в React.StrictMode.
```
-<RootRef rootRef={ref}>
-  <Button />
-</RootRef>
+<Button ref={ref} />
```

Select (Список)

Change the default variant from standard to outlined. Standard has been removed from the Material Design guidelines. If you are composing the Select with a form control component, you only need to update FormControl, the select inherits the variant from its context.
```
-<Select value="Standard" />
-<Select value="Outlined" variant="outlined" />
+<Select value="Standard" variant="standard" />
+<Select value="Outlined" />
```

This codemod will automatically update your code.

Remove the labelWidth prop. The label prop now fulfills the same purpose, using CSS layout instead of JavaScript measurement to render the gap in the outlined. The TextField already handles it by default.
```
-<Select variant="outlined" labelWidth={20} />
+<Select variant="outlined" label="Gender" />
```

Merge the selectMenu slot into select. Slot selectMenu was redundant. The root slot is no longer applied to the select, but to the root.

-<Select classes={{ root: 'class1', select: 'class2', selectMenu: 'class3' }} />
+<Select classes={{ select: 'class1 class2 class3' }} />

Skeleton

Перемещаем компонент из lab в core. Компонент теперь стабилен.
```
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
```
You can use the moved-lab-modules codemod for automatic migration.

Rename circle to circular and rect to rectangular for consistency:

-<Skeleton variant="circle" />
-<Skeleton variant="rect" />
-<Skeleton classes={{ circle: 'custom-circle-classname', rect: 'custom-rect-classname',  }} />
+<Skeleton variant="circular" />
+<Skeleton variant="rectangular" />
+<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} />

Slider

TypeScript: тип параметра event в onChange теперь не React.ChangeEvent а React.SyntheticEvent.

-<Slider onChange={(event: React.ChangeEvent<{}>, value: unknown) => {}} />
+<Slider onChange={(event: React.SyntheticEvent, value: unknown) => {}} />

The ValueLabelComponent and ThumbComponent prop is now part of the components prop.

<Slider
-  ValueLabelComponent={CustomValueLabel}
-  ThumbComponent={CustomThumb}
+  components={{
+    ValueLabel: CustomValueLabel,
+    Thumb: CustomThumb,
+  }}
/>

Rework the CSS to match the latest Material Design guidelines and make custom styles more intuitive. See documentation.

You can reduce the density of the slider, closer to v4 with the size="small" prop.

Snackbar

Уведомление теперь отображается в левом нижнем углу на больших экранах. Это лучше соответствует поведению Gmail, Google Keep, material.io и т.д. Вы можете восстановить прежнее поведение с помощью:
```
-<Snackbar />
+<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
```

Свойства onE* transition были удалены. Используйте вместо них TransitionProps.

<Snackbar
-  onEnter={onEnter}
-  onEntered={onEntered}
-  onEntering={onEntering}
-  onExit={onExit}
-  onExited={onExited}
-  onExiting={onExiting}
+  TransitionProps={{
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+  }}
/>

You can use the use-transitionprops codemod for automatic migration.

SpeedDial

Перемещаем компонент из lab в core. Компонент теперь стабилен.

-import SpeedDial from '@material-ui/lab/SpeedDial';
-import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
-import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
+import SpeedDial from '@material-ui/core/SpeedDial';
+import SpeedDialAction from '@material-ui/core/SpeedDialAction';
+import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';

You can use the moved-lab-modules codemod for automatic migration.

Stepper

Корневой компонент (Paper) заменен на div. Свойство elevation удалено и Stepper больше не наследует свойста от Paper. Это изменение рассчитано на поощрение композиции.
```
-<Stepper elevation={2}>
-  <Step>
-    <StepLabel>Hello world</StepLabel>
-  </Step>
-</Stepper>
+<Paper square elevation={2}>
+  <Stepper>
+    <Step>
+      <StepLabel>Hello world</StepLabel>
+    </Step>
+  </Stepper>
+<Paper>
```

Удаляем встроенные отступы(padding) 24px.

-<Stepper>
-  <Step>
-    <StepLabel>Hello world</StepLabel>
-  </Step>
-</Stepper>
+<Stepper style={{ padding: 24 }}>
+  <Step>
+    <StepLabel>Hello world</StepLabel>
+  </Step>
+</Stepper>

SvgIcon

The default value of fontSize was changed from default to medium for consistency. In the unlikey event that you were using the value default, the prop can be removed:
```
-<SvgIcon fontSize="default">
+<SvgIcon>
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</SvgIcon>
```

Switch (переключатель)

Remove the second argument from onChange. You can pull out the checked state by accessing event.target.checked.

function MySwitch() {
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+   const checked = event.target.checked;
  };

  return <Switch onChange={handleChange} />;
}

The switch color prop is now "primary" by default. To continue using the "secondary" color, you must explicitly indicate secondary. This brings the switch closer to the Material Design guidelines.
```
-<Switch />
+<Switch color="secondary" />
```

The component doesn't have .MuiIconButton-root and .MuiIconButton-label class names anymore, target .MuiButtonBase-root instead.

<span class="MuiSwitch-root">
-   <span class="MuiIconButton-root MuiButtonBase-root MuiSwitch-switchBase PrivateSwitchBase-root">
-     <span class="MuiIconButton-label">
-       <input class="MuiSwitch-input PrivateSwitchBase-input">
+   <span class="MuiButtonBase-root MuiSwitch-switchBase PrivateSwitchBase-root">
+     <span class="MuiSwitch-input PrivateSwitchBase-input">

Table (tаблица)

Настройка ярлыков кнопок постраничной разбивки должна осуществляться с помощью свойства getItemAriaLabel. За счет этого улучшается сопоставимость с компонентом Pagination.
```
<TablePagination
- backIconButtonText="Avant"
- nextIconButtonText="Après"
+ getItemAriaLabel={…}
```
Переименовываем onChangeRowsPerPage на onRowsPerPageChange и onChangePage на onPageChange для сопоставимоти с API.
```
<TablePagination
- onChangeRowsPerPage={()=>{}}
- onChangePage={()=>{}}
+ onRowsPerPageChange={()=>{}}
+ onPageChange={()=>{}}
```

Separate classes for different table pagination labels. This allows simpler customizations.

<TablePagination
- classes={{ caption: 'foo' }}
+ classes={{ selectLabel: 'foo', displayedRows: 'foo' }}
/>

Move the custom class on input to select. The input key is being applied on another element.
```
<TablePagination
- classes={{ input: 'foo' }}
+ classes={{ select: 'foo' }}
/>
```

Rename the default value of the padding prop to normal.

-<Table padding="default" />
-<TableCell padding="default" />
+<Table padding="normal" />
+<TableCell padding="normal" />

Вкладки

Change the default indicatorColor and textColor prop values to "primary". This is done to match the most common use cases with Material Design.
```
-<Tabs />
+<Tabs indicatorColor="primary" textColor="inherit" />
```

TypeScript: тип параметра event в onChange теперь не React.ChangeEvent а React.SyntheticEvent.

-<Tabs onChange={(event: React.ChangeEvent<{}>, value: unknown) => {}} />
+<Tabs onChange={(event: React.SyntheticEvent, value: unknown) => {}} />

Управляющее кнопками прокрутки API разделено на два параметра.
- Параметр scrollButtons управляет видимостью кнопок в зависимоти от доступного пространства.
- Параметр allowScrollButtonsMobile удаляет медиа-запрос CSS, который систематически скрывает кнопки прокрутки на мобильных устройствах.
```
-<Tabs scrollButtons="on" />
-<Tabs scrollButtons="desktop" />
-<Tabs scrollButtons="off" />
+<Tabs scrollButtons allowScrollButtonsMobile />
+<Tabs scrollButtons />
+<Tabs scrollButtons={false} />
```
Tab minWidth changed from 72px => 90px (without media-query) according to material-design spec
Tab maxWidth changed from 264px => 360px according to material-design spec

TextField

Change the default variant from standard to outlined. Standard has been removed from the Material Design guidelines.
```
-<TextField value="Standard" />
-<TextField value="Outlined" variant="outlined" />
+<TextField value="Standard" variant="standard" />
+<TextField value="Outlined" />
```
You can use the variant-prop codemod for automatic migration.
Rename rowsMax prop with maxRows for consistency with HTML attributes.
```
-<TextField rowsMax={6}>
+<TextField maxRows={6}>
```
Улучшаем определение поведения - когда используется textarea фиксированной высоты, а когда textarea c динамической высотой. Вам нужно использовать параметр minRows в следующем случае:
```
-<TextField rows={2} maxRows={5} />
+<TextField minRows={2} maxRows={5} />
```

Change ref forwarding expectations on custom inputComponent. The component should forward the ref prop instead of the inputRef prop.

-function NumberFormatCustom(props) {
-  const { inputRef, onChange, ...other } = props;
+const NumberFormatCustom = React.forwardRef(function NumberFormatCustom(
+  props,
+  ref,
+) {
  const { onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
-     getInputRef={inputRef}
+     getInputRef={ref}

Rename marginDense and inputMarginDense classes to sizeSmall and inputSizeSmall to match the prop.
```
-<Input margin="dense" />
+<Input size="small" />
```

Set the InputAdornment position prop to start or end. Use start if used as the value of the startAdornment prop. Use end if used as the value of the endAdornment prop.

-<TextField startAdornment={<InputAdornment>Kg</InputAdornment>} />
-<TextField endAdornment={<InputAdornment>Kg</InputAdornment>} />
+<TextField startAdornment={<InputAdornment position="start">Kg</InputAdornment>} />
+<TextField endAdornment={<InputAdornment position="end">Kg</InputAdornment>} />

TextareaAutosize

Удаляем свойство rows и используем вместо него minRows. Цель этого изменения - сделать поведение свойства более понятным.
```
-<TextareaAutosize rows={2} />
+<TextareaAutosize minRows={2} />
```
Rename rowsMax prop with maxRows for consistency with HTML attributes.
```
-<TextareAutosize rowsMax={6}>
+<TextareAutosize maxRows={6}>
```
Переименовываем свойство rowsMin на minRows для соответствия HTML атрибутам.
```
-<TextareAutosize rowsMin={1}>
+<TextareAutosize minRows={1}>
```

ToggleButton

Перемещаем компонент из lab в core. Компонент теперь стабилен.

-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';

You can use the moved-lab-modules codemod for automatic migration.

Подсказки теперь интерактивны по умолчанию.

Прежнее подразумеваемое по умолчанию поведение не удовлетворяет требованию success criterion 1.4.3 ("hoverable") в WCAG 2.1. Чтобы отразить новое значение по умолчанию, прежнее свойство переименовано на disableInteractive. Если вы хотите восстановить прежнее поведение (лишившись при этом уровня АА), вы можете применить следующие изменения:
```
-<Tooltip>
+<Tooltip disableInteractive>

# Интерактивные подсказки больше не нуждаются в свойстве `interactive`.
-<Tooltip interactive>
+<Tooltip>
```

Typography

Remove the srOnly variant. You can use the visuallyHidden utility in conjunction with the sx prop instead.

+import { visuallyHidden } from '@material-ui/utils';

-<Typography variant="srOnly">Create a user</Typography>
+<span style={visuallyHidden}>Create a user</span>

The following classes and style overrides keys were removed: "colorInherit", "colorPrimary", "colorSecondary", "colorTextPrimary", "colorTextSecondary", "colorError", "displayInline" and "displayBlock". These props are now considered part of the system, not on the Typography component itself. If you still wish to add overrides for them, you can use the theme.components.MuiTypography.variants options. For example
```
const theme = createTheme({
  components: {
    MuiTypography: {
-     styleOverrides: {
-       colorSecondary: {
-         marginTop: '20px',
-       },
-     },
+     variants: {
+       props: { color: "secondary" },
+       style: {
+         marginTop: '20px',
+       },
+     }],
    },
  },
});
```

`@material-ui/core/styles`

createGenerateClassName

The createGenerateClassName function is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
```
-import { createGenerateClassName } from '@material-ui/core/styles';
+import { createGenerateClassName } from '@material-ui/styles';
```

jssPreset

The jssPreset object is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
```
-import { jssPreset } from '@material-ui/core/styles';
+import { jssPreset } from '@material-ui/styles';
```

makeStyles

The makeStyles JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/makeStyles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core/styles instead.

-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';

+const theme = createTheme();
 const useStyles = makeStyles((theme) => ({
   background: theme.palette.primary.main,
 }));
 function Component() {
   const classes = useStyles();
   return <div className={classes.root} />
 }

 // In the root of your app
 function App(props) {
-  return <Component />;
+  return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
 }

MuiThemeProvider

The MuiThemeProvider component is no longer exported from @material-ui/core/styles. Use ThemeProvider instead.

-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';

ServerStyleSheets

The ServerStyleSheets component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
```
-import { ServerStyleSheets } from '@material-ui/core/styles';
+import { ServerStyleSheets } from '@material-ui/styles';
```

styled

The styled JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/styled instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core/styles instead.

-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';

+const theme = createTheme();
 const MyComponent = styled('div')(({ theme }) => ({ background: theme.palette.primary.main }));

 function App(props) {
-  return <MyComponent />;
+  return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
 }

StylesProvider

The StylesProvider component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
```
-import { StylesProvider } from '@material-ui/core/styles';
+import { StylesProvider } from '@material-ui/styles';
```

useThemeVariants

The useThemeVariants hook is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
```
-import { useThemeVariants } from '@material-ui/core/styles';
+import { useThemeVariants } from '@material-ui/styles';
```

withStyles

Replace the innerRef prop with the ref prop. Refs are now automatically forwarded to the inner component.

import * as React from 'react';
import { withStyles } from '@material-ui/styles';

const MyComponent = withStyles({
  root: {
    backgroundColor: 'red',
  },
})(({ classes }) => <div className={classes.root} />);

function MyOtherComponent(props) {
  const ref = React.useRef();
- return <MyComponent innerRef={ref} />;
+ return <MyComponent ref={ref} />;
}

The withStyles JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/withStyles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, you should use the ThemeProvider component from @material-ui/core/styles instead.

-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';

+const defaultTheme = createTheme();
 const MyComponent = withStyles((props) => {
   const { classes, className, ...other } = props;
   return <div className={clsx(className, classes.root)} {...other} />
 })(({ theme }) => ({ root: { background: theme.palette.primary.main }}));

 function App() {
-  return <MyComponent />;
+  return <ThemeProvider theme={defaultTheme}><MyComponent /></ThemeProvider>;
 }

withTheme

The withTheme HOC utility has been removed from the @material-ui/core/styles package. You can use @material-ui/styles/withTheme instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core/styles instead.

-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';

+const theme = createTheme();
 const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);

 function App(props) {
-  return <MyComponent />;
+  return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
 }

Replace the innerRef prop with the ref prop. Refs are now automatically forwarded to the inner component.

import * as React from 'react';
import { withTheme  } from '@material-ui/core/styles';

const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);

function MyOtherComponent(props) {
  const ref = React.useRef();
- return <MyComponent innerRef={ref} />;
+ return <MyComponent ref={ref} />;
}

withWidth

This HOC was removed. There's an alternative using the useMediaQuery hook on this page.

`@material-ui/types`

Rename the exported Omit type in @material-ui/types. The module is now called DistributiveOmit. The change removes the confusion with the built-in Omit helper introduced in TypeScript v3.5. The built-in Omit, while similar, is non-distributive. This leads to differences when applied to union types. See this StackOverflow answer for further details.
```
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
```

`@material-ui/styles`

ThemeProvider

If you are using the utilities from @material-ui/styles together with the @material-ui/core, you should replace the use of ThemeProvider from @material-ui/styles with the one exported from @material-ui/core/styles. This way, the theme provided in the context will be available in both the styling utilities exported from @material-ui/styles, like makeStyles, withStyles etc. and the Material-UI components.

-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider } from '@material-ui/core/styles';

Default theme (TypeScript)

The @material-ui/styles package is no longer part of @material-ui/core/styles. If you are using @material-ui/styles together with @material-ui/core you need to add a module augmentation for the DefaultTheme.

import { Theme } from '@material-ui/core/styles';

declare module '@material-ui/styles' {
  interface DefaultTheme extends Theme {}
}

Переход с v4 на v5

Вступление

Why you should migrate

Updating your dependencies

Update Material-UI version

Handling breaking changes

Поддерживаемые версии браузеров и node

non-ref-forwarding class components

Supported React version

Supported TypeScript version

Style library

Темы

Upgrade helper

Supported changes

Стили

Система

Core components

AppBar

Alert

Autocomplete (Автодополнение)

Avatar

Badge

BottomNavigation

Box

Button

Chip

Checkbox

Групповой прогресс

Collapse

CssBaseline

Dialog

Divider

ExpansionPanel

Fab

FormControl

Grid

GridList

Hidden

Icon

IconButton

Menu

MenuItem

Modal

NativeSelect

OutlinedInput

Paper

Pagination

Popover

Popper

Portal

Радиокнопка

Rating

RootRef

Select (Список)

Skeleton

Slider

Snackbar

SpeedDial

Stepper

SvgIcon

Switch (переключатель)

Table (tаблица)

Вкладки

TextField

TextareaAutosize

ToggleButton

Tooltip

Typography

@material-ui/core/styles

createGenerateClassName

jssPreset

makeStyles

MuiThemeProvider

ServerStyleSheets

styled

StylesProvider

useThemeVariants

withStyles

withTheme

withWidth

`@material-ui/core/styles`

`@material-ui/types`

`@material-ui/styles`