Breaking changes in v5, part two: core components

This is a reference guide to the breaking changes introduced in Material UI v5, and how to migrating from v4. This part covers changes to components.

Material UI v5 migration

Getting started
Breaking changes part one: style and theme
Breaking changes part two: components 👈 you are here
Migrating from JSS
Troubleshooting

Breaking changes, part two

Material UI v5 introduces a number of breaking changes from v4. Many of these changes can be resolved automatically using the codemods described in the main migration guide.

The following document lists all breaking changes related to components in v5 and how to address them.

If you haven't already, please be sure to review Breaking changes in v5 part one: styles and themes to continue the migration process.

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.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MuiComponent</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>SomeOtherComponent<span class="token punctuation">}</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>

AppBar

Fix z-index issues

Remove z-index when position static and relative. This avoids the creation of a stacking context and rendering issues.

Replace color prop for dark mode

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.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">AppBar</span></span> <span class="token attr-name">enableColorOnDark</span> <span class="token punctuation">/></span></span>

Alert

✅ Update import

Move the component from the lab to the core. The component is now stable.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import Alert from '@mui/lab/Alert';
</span><span class="token prefix deleted">-</span><span class="token line">import AlertTitle from '@mui/lab/AlertTitle';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Alert from '@mui/material/Alert';
</span><span class="token prefix inserted">+</span><span class="token line">import AlertTitle from '@mui/material/AlertTitle';</span></span>

Autocomplete

✅ Update import

Move the component from the lab to the core. The component is now stable.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import Autocomplete from '@mui/lab/Autocomplete';
</span><span class="token prefix deleted">-</span><span class="token line">import useAutocomplete  from '@mui/lab/useAutocomplete';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Autocomplete from '@mui/material/Autocomplete';
</span><span class="token prefix inserted">+</span><span class="token line">import useAutocomplete from '@mui/material/useAutocomplete';</span></span>

Remove debug prop

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

Update `renderOption`

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

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Autocomplete
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  renderOption={(option, { selected }) => (
</span><span class="token prefix deleted">-</span><span class="token line">    &lt;React.Fragment>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  renderOption={(props, option, { selected }) => (
</span><span class="token prefix inserted">+</span><span class="token line">    &lt;li {...props}>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      &lt;Checkbox
</span><span class="token prefix unchanged"> </span><span class="token line">        icon={icon}
</span><span class="token prefix unchanged"> </span><span class="token line">        checkedIcon={checkedIcon}
</span><span class="token prefix unchanged"> </span><span class="token line">        style={{ marginRight: 8 }}
</span><span class="token prefix unchanged"> </span><span class="token line">        checked={selected}
</span><span class="token prefix unchanged"> </span><span class="token line">      />
</span><span class="token prefix unchanged"> </span><span class="token line">      {option.title}
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    &lt;/React.Fragment>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    &lt;/li>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  )}
</span><span class="token prefix unchanged"> </span><span class="token line">/></span></span>

✅ Rename `closeIcon` to `clearIcon`

Rename closeIcon prop to clearIcon to avoid confusion.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Autocomplete closeIcon={defaultClearIcon} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Autocomplete clearIcon={defaultClearIcon} /></span></span>

Rename reason arguments

The following values of the reason argument in onChange and onClose were renamed for consistency:

create-option to createOption
select-option to selectOption
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.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">'.MuiAutocomplete-option[data-focus="true"]': {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">'.MuiAutocomplete-option.Mui-focused': {</span></span>

✅ Rename getOptionSelected

Rename getOptionSelected to isOptionEqualToValue to better describe its purpose.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Autocomplete
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  getOptionSelected={(option, value) => option.title === value.title}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  isOptionEqualToValue={(option, value) => option.title === value.title}</span></span>

Avatar

✅ Rename circle

Rename circle to circular for consistency:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Avatar variant="circle">
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Avatar classes={{ circle: 'className' }}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Avatar variant="circular">
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Avatar classes={{ circular: 'className' }}></span></span>

Since circular is the default value, the variant prop can be deleted:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Avatar variant="circle">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Avatar></span></span>

✅ Update AvatarGroup import

Move the AvatarGroup from the lab to the core.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import AvatarGroup from '@mui/lab/AvatarGroup';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import AvatarGroup from '@mui/material/AvatarGroup';</span></span>

Badge

✅ Rename circle and rectangle

Rename circle to circular and rectangle to rectangular for consistency.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Badge overlap="circle">
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Badge overlap="rectangle">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Badge overlap="circular">
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Badge overlap="rectangular"></span></span>

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Badge classes={{
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  anchorOriginTopRightRectangle: 'className',
</span><span class="token prefix deleted">-</span><span class="token line">  anchorOriginBottomRightRectangle: 'className',
</span><span class="token prefix deleted">-</span><span class="token line">  anchorOriginTopLeftRectangle: 'className',
</span><span class="token prefix deleted">-</span><span class="token line">  anchorOriginBottomLeftRectangle: 'className',
</span><span class="token prefix deleted">-</span><span class="token line">  anchorOriginTopRightCircle: 'className',
</span><span class="token prefix deleted">-</span><span class="token line">  anchorOriginBottomRightCircle: 'className',
</span><span class="token prefix deleted">-</span><span class="token line">  anchorOriginTopLeftCircle: 'className',
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  anchorOriginTopRightRectangular: 'className',
</span><span class="token prefix inserted">+</span><span class="token line">  anchorOriginBottomRightRectangular: 'className',
</span><span class="token prefix inserted">+</span><span class="token line">  anchorOriginTopLeftRectangular: 'className',
</span><span class="token prefix inserted">+</span><span class="token line">  anchorOriginBottomLeftRectangular: 'className',
</span><span class="token prefix inserted">+</span><span class="token line">  anchorOriginTopRightCircular: 'className',
</span><span class="token prefix inserted">+</span><span class="token line">  anchorOriginBottomRightCircular: 'className',
</span><span class="token prefix inserted">+</span><span class="token line">  anchorOriginTopLeftCircular: 'className',
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">}}></span></span>

BottomNavigation

Update event type (TypeScript)

The event in onChange is now typed as a React.SyntheticEvent instead of a React.ChangeEvent.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;BottomNavigation onChange={(event: React.ChangeEvent&lt;{}>) => {}} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;BottomNavigation onChange={(event: React.SyntheticEvent) => {}} /></span></span>

BottomNavigationAction

Remove span and wrapper

Remove the span element that wraps the children. Remove the wrapper classKey too.

You can find out more details about this change in this GitHub pull request.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;button class="MuiBottomNavigationAction-root">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;span class="MuiBottomNavigationAction-wrapper">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    {icon}
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;span class="MuiBottomNavigationAction-label">
</span><span class="token prefix unchanged"> </span><span class="token line">      {label}
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;/span>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/span>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;/button></span></span>

Box

✅ Update borderRadius prop value

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.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Box borderRadius="borderRadius">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Box borderRadius={1}></span></span>

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Box borderRadius={16}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Box borderRadius="16px"></span></span>

✅ Apply sx API

The Box system props have an optional alternative API in v5, using the sx prop.

Check out the System docs to learn more about the tradeoffs of this API.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1px dashed grey<span class="token punctuation">"</span></span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">m</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">border</span><span class="token operator">:</span> <span class="token string">"1px dashed grey"</span><span class="token punctuation">,</span> <span class="token literal-property property">p</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">m</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>

✅ Rename CSS properties

The following properties have been renamed because they are considered deprecated CSS properties by the CSS specification:

gridGap to gap
gridColumnGap to columnGap
gridRowGap to rowGap

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Box gridGap={1}>
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Box gridColumnGap={2}>
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Box gridRowGap={3}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Box gap={1}>
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Box columnGap={2}>
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Box rowGap={3}></span></span>

Remove clone prop

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.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Box sx={{ border: '1px dashed grey' }} clone>
</span><span class="token prefix deleted">-</span><span class="token line">  &lt;Button>Save&lt;/Button>
</span><span class="token prefix deleted">-</span><span class="token line">&lt;/Box>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Button sx={{ border: '1px dashed grey' }}>Save&lt;/Button></span></span>

Replace render prop with `sx`

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.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Box sx={{ border: '1px dashed grey' }}>
</span><span class="token prefix deleted">-</span><span class="token line">  {(props) => &lt;Button {...props}>Save&lt;/Button>}
</span><span class="token prefix deleted">-</span><span class="token line">&lt;/Box>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Button sx={{ border: '1px dashed grey' }}>Save&lt;/Button></span></span>

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

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Box sx={{ border: '1px dashed grey' }}>
</span><span class="token prefix deleted">-</span><span class="token line">  {(props) => &lt;button {...props}>Save&lt;/button>}
</span><span class="token prefix deleted">-</span><span class="token line">&lt;/Box>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Box component="button" sx={{ border: '1px dashed grey' }}>Save&lt;/Box></span></span>

Button

✅ Remove default color prop

The button color prop is now "primary" by default, and "default" has been removed. This makes the button closer to the Material Design guidelines and simplifies the API.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Button color="default">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Button></span></span>

Remove span and label

The span element that wraps children has been removed. The label classKey is also removed.

You can find out more details about this change in this GitHub pull request, it used to be necessary for iOS.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;button class="MuiButton-root">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;span class="MuiButton-label">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    children
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/span>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;/button></span></span>

Chip

✅ Rename default to filled

Rename default variant to filled for consistency.

Since filled is the default value, the variant prop can be deleted:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Chip variant="default">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Chip></span></span>

Checkbox

Set to "primary" by default

The checkbox color prop is now "primary" by default. To continue using the "secondary" color, you must explicitly indicate secondary. This brings the checkbox closer to the Material Design guidelines.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Checkbox />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Checkbox color="secondary" /></span></span>

Update CSS class names

The component doesn't have .MuiIconButton-root and .MuiIconButton-label class names anymore.

Target .MuiButtonBase-root instead.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;span class="MuiIconButton-root MuiButtonBase-root MuiCheckbox-root PrivateSwitchBase-root">
</span><span class="token prefix deleted">-</span><span class="token line">  &lt;span class="MuiIconButton-label">
</span><span class="token prefix deleted">-</span><span class="token line">    &lt;input class="PrivateSwitchBase-input">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;span class="MuiButtonBase-root MuiCheckbox-root PrivateSwitchBase-root">
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;span class="PrivateSwitchBase-input"></span></span>

CircularProgress

✅ Rename static to determinate

The static variant has been renamed to determinate, and the previous appearance of determinate has been replaced by that of static.

This was an exception to Material Design, and was removed from the specification.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;CircularProgress variant="static" classes={{ static: 'className' }} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;CircularProgress variant="determinate" classes={{ determinate: 'className' }} /></span></span>

Collapse

✅ Rename collapsedHeight prop

The collapsedHeight prop was renamed collapsedSize to support the horizontal direction.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Collapse collapsedHeight={40}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Collapse collapsedSize={40}></span></span>

The classes.container key was changed to match the convention of the other components.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Collapse classes={{ container: 'collapse' }}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Collapse classes={{ root: 'collapse' }}></span></span>

CssBaseline

Update styled-engine

The component was migrated to use the @mui/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.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const theme = createTheme({
</span><span class="token prefix unchanged"> </span><span class="token line">  components: {
</span><span class="token prefix unchanged"> </span><span class="token line">    MuiCssBaseline: {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">      styleOverrides: {
</span><span class="token prefix deleted">-</span><span class="token line">        '@global': {
</span><span class="token prefix deleted">-</span><span class="token line">          html: {
</span><span class="token prefix deleted">-</span><span class="token line">            WebkitFontSmoothing: 'auto',
</span><span class="token prefix deleted">-</span><span class="token line">          },
</span><span class="token prefix deleted">-</span><span class="token line">        },
</span><span class="token prefix deleted">-</span><span class="token line">      },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      styleOverrides: `
</span><span class="token prefix inserted">+</span><span class="token line">        html {
</span><span class="token prefix inserted">+</span><span class="token line">          -webkit-font-smoothing: auto;
</span><span class="token prefix inserted">+</span><span class="token line">        }
</span><span class="token prefix inserted">+</span><span class="token line">      `
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">  },
</span><span class="token prefix unchanged"> </span><span class="token line">});</span></span>

Update body font size

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:

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createMuiTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">MuiCssBaseline</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'0.875rem'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">1.43</span><span class="token punctuation">,</span>
          <span class="token literal-property property">letterSpacing</span><span class="token operator">:</span> <span class="token string">'0.01071em'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Dialog

✅ Update transition props

The on* transition props were removed. Use TransitionProps instead.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;Dialog
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  onEnter={onEnter}
</span><span class="token prefix deleted">-</span><span class="token line">  onEntered={onEntered}
</span><span class="token prefix deleted">-</span><span class="token line">  onEntering={onEntering}
</span><span class="token prefix deleted">-</span><span class="token line">  onExit={onExit}
</span><span class="token prefix deleted">-</span><span class="token line">  onExited={onExited}
</span><span class="token prefix deleted">-</span><span class="token line">  onExiting={onExiting}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  TransitionProps={{
</span><span class="token prefix inserted">+</span><span class="token line">    onEnter,
</span><span class="token prefix inserted">+</span><span class="token line">    onEntered,
</span><span class="token prefix inserted">+</span><span class="token line">    onEntering,
</span><span class="token prefix inserted">+</span><span class="token line">    onExit,
</span><span class="token prefix inserted">+</span><span class="token line">    onExited,
</span><span class="token prefix inserted">+</span><span class="token line">    onExiting,
</span><span class="token prefix inserted">+</span><span class="token line">  }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ></span></span>

✅ Remove disableBackdropClick prop

Remove the disableBackdropClick prop because it is redundant.

Ignore close events from onClose when reason === 'backdropClick' instead.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;Dialog
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  disableBackdropClick
</span><span class="token prefix deleted">-</span><span class="token line">  onClose={handleClose}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  onClose={(event, reason) => {
</span><span class="token prefix inserted">+</span><span class="token line">    if (reason !== 'backdropClick') {
</span><span class="token prefix inserted">+</span><span class="token line">      handleClose(event, reason);
</span><span class="token prefix inserted">+</span><span class="token line">    }
</span><span class="token prefix inserted">+</span><span class="token line">  }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> /></span></span>

Remove withMobileDialog component

Remove the withMobileDialog higher-order component.

The hook API allows a simpler and more flexible solution:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import withMobileDialog from '@mui/material/withMobileDialog';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { useTheme, useMediaQuery } from '@mui/material';
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function ResponsiveDialog(props) {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  const { fullScreen } = props;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  const theme = useTheme();
</span><span class="token prefix inserted">+</span><span class="token line">  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  const [open, setOpen] = React.useState(false);
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">// ...
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">export default withMobileDialog()(ResponsiveDialog);
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">export default ResponsiveDialog;</span></span>

✅ Remove disableTypography prop

Flatten DialogTitle DOM structure and remove the disableTypography prop.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;DialogTitle disableTypography>
</span><span class="token prefix deleted">-</span><span class="token line">  &lt;Typography variant="h4" component="h2">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;DialogTitle>
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;Typography variant="h4" component="span">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     My header
</span><span class="token prefix unchanged"> </span><span class="token line">  &lt;/Typography></span></span>

Divider

Replace background-color with border-color

Use border-color instead of background-color. This prevents inconsistent height on scaled screens.

If you have customized the color of the border, you will need to update the CSS property override:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">.MuiDivider-root {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  background-color: #f00;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  border-color: #f00;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">}</span></span>

Support "middle" variant with "vertical" orientation

In v4, using orientation="vertical" and variant="middle" was adding a left and right margins of 16px in the component. In the v5, to avoid fixed spacing on the component, this margin was removed.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const theme = createTheme({
</span><span class="token prefix unchanged"> </span><span class="token line"> components: {
</span><span class="token prefix unchanged"> </span><span class="token line">  MuiDivider: {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     styleOverrides: {
</span><span class="token prefix inserted">+</span><span class="token line">       root: ({ ownerState, theme }) => ({
</span><span class="token prefix inserted">+</span><span class="token line">         ...(ownerState.orientation === 'vertical' &amp;&amp; ownerState.variant === 'middle' &amp;&amp; {
</span><span class="token prefix inserted">+</span><span class="token line">           marginLeft: theme.spacing(2),
</span><span class="token prefix inserted">+</span><span class="token line">           marginRight: theme.spacing(2),
</span><span class="token prefix inserted">+</span><span class="token line">         }),
</span><span class="token prefix inserted">+</span><span class="token line">       })
</span><span class="token prefix inserted">+</span><span class="token line">     }
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   },
</span><span class="token prefix unchanged"> </span><span class="token line"> },
</span><span class="token prefix unchanged"> </span><span class="token line">});</span></span>

ExpansionPanel

✅ Rename components

Rename the ExpansionPanel components to Accordion to use a more common naming convention:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import ExpansionPanel from '@mui/material/ExpansionPanel';
</span><span class="token prefix deleted">-</span><span class="token line">import ExpansionPanelSummary from '@mui/material/ExpansionPanelSummary';
</span><span class="token prefix deleted">-</span><span class="token line">import ExpansionPanelDetails from '@mui/material/ExpansionPanelDetails';
</span><span class="token prefix deleted">-</span><span class="token line">import ExpansionPanelActions from '@mui/material/ExpansionPanelActions';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Accordion from '@mui/material/Accordion';
</span><span class="token prefix inserted">+</span><span class="token line">import AccordionSummary from '@mui/material/AccordionSummary';
</span><span class="token prefix inserted">+</span><span class="token line">import AccordionDetails from '@mui/material/AccordionDetails';
</span><span class="token prefix inserted">+</span><span class="token line">import AccordionActions from '@mui/material/AccordionActions';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;ExpansionPanel>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Accordion>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;ExpansionPanelSummary>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;AccordionSummary>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;Typography>Location&lt;/Typography>
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;Typography>Select trip destination&lt;/Typography>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/ExpansionPanelSummary>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;/AccordionSummary>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;ExpansionPanelDetails>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;AccordionDetails>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;Chip label="Barbados" onDelete={() => {}} />
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;Typography variant="caption">Select your destination of choice&lt;/Typography>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/ExpansionPanelDetails>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;/AccordionDetails>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   &lt;Divider />
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;ExpansionPanelActions>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;AccordionActions>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;Button size="small">Cancel&lt;/Button>
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;Button size="small">Save&lt;/Button>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/ExpansionPanelActions>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;/AccordionActions>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;/ExpansionPanel>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;/Accordion></span></span>

Update event type (TypeScript)

The event in onChange is now typed as a React.SyntheticEvent instead of a React.ChangeEvent.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Accordion onChange={(event: React.ChangeEvent&lt;{}>, expanded: boolean) => {}} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} /></span></span>

ExpansionPanelDetails

Remove display: flex

Remove display: flex from AccordionDetails (formerly ExpansionPanelDetails) as it was too opinionated—most developers expect display: block.

ExpansionPanelSummary

Rename focused to focusVisible

Rename focused to focusVisible for consistency:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;AccordionSummary
</span><span class="token prefix unchanged"> </span><span class="token line">  classes={{
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    focused: 'custom-focus-visible-classname',
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    focusVisible: 'custom-focus-visible-classname',
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  }}
</span><span class="token prefix unchanged"> </span><span class="token line">/></span></span>

Remove IconButtonProps prop

Remove IconButtonProps prop from AccordionSummary (formerly ExpansionPanelSummary).

The component renders a <div> element instead of an IconButton, so the prop is no longer necessary.

Fab

✅ Rename round to circular

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Fab variant="round">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Fab variant="circular"></span></span>

Remove span and label

The span element that wraps children has been removed. The label classKey is also removed.

You can find out more details about this change in this GitHub pull request, it used to be necessary for iOS.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;button class="MuiFab-root">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;span class="MuiFab-label">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    {children}
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/span>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;/button></span></span>

FormControl

✅ Update default variant

Change the default variant from standard to outlined.

standard has been removed from the Material Design guidelines.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;FormControl value="Standard" />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;FormControl value="Outlined" variant="outlined" />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;FormControl value="Standard" variant="standard" />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;FormControl value="Outlined" /></span></span>

FormControlLabel

Add required label prop

The label prop is now required. If you were using a FormControlLabel without a label, you can replace it with just the value of the control prop.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;FormControlLabel control={&lt;Checkbox />} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Checkbox /></span></span>

Grid

✅ Rename justify prop

Rename the justify prop to justifyContent to align with the CSS property name.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Grid justify="center">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Grid justifyContent="center"></span></span>

✅ Remove align and justify props and classes

The props alignItems, alignContent, and justifyContent—along with their classes and style overrides keys—have been 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 the Grid component itself.

If you still wish to add overrides for them, you can use the callback as a value in styleOverrides.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const theme = createTheme({
</span><span class="token prefix unchanged"> </span><span class="token line">  components: {
</span><span class="token prefix unchanged"> </span><span class="token line">    MuiGrid: {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">      styleOverrides: {
</span><span class="token prefix deleted">-</span><span class="token line">        'align-items-xs-flex-end': {
</span><span class="token prefix deleted">-</span><span class="token line">          marginTop: 20,
</span><span class="token prefix deleted">-</span><span class="token line">        },
</span><span class="token prefix deleted">-</span><span class="token line">      },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      styleOverrides: ({ ownerState }) => ({
</span><span class="token prefix inserted">+</span><span class="token line">        ...ownerState.alignItems === 'flex-end' &amp;&amp; {
</span><span class="token prefix inserted">+</span><span class="token line">          marginTop: 20,
</span><span class="token prefix inserted">+</span><span class="token line">        },
</span><span class="token prefix inserted">+</span><span class="token line">      }),
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">  },
</span><span class="token prefix unchanged"> </span><span class="token line">});</span></span>

Change negative margins

The negative margins apply only to the top and left sides of the grid container. If you need negative margins on all sides, we recommend using the new Grid v2 instead:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import Grid from '@mui/material/Grid';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import Grid from '@mui/material/Unstable_Grid2';</span></span>

To learn more about the Grid v2, check out the demos and the Grid migration guide.

GridList

✅ Rename GridList component

Rename the GridList components to ImageList to align with the current Material Design naming.

Rename GridList props

Rename the GridList spacing prop to gap to align with the CSS attribute.
Rename the GridList cellHeight prop to rowHeight.
Add the variant prop to GridList.
Rename the GridListItemBar actionPosition prop to position. (Note also the related classname changes.)

Use CSS object-fit

Use CSS object-fit. For IE11 support either use a polyfill such as this npm package, or else continue to use the v4 component.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import GridList from '@mui/material/GridList';
</span><span class="token prefix deleted">-</span><span class="token line">import GridListTile from '@mui/material/GridListTile';
</span><span class="token prefix deleted">-</span><span class="token line">import GridListTileBar from '@mui/material/GridListTileBar';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import ImageList from '@mui/material/ImageList';
</span><span class="token prefix inserted">+</span><span class="token line">import ImageListItem from '@mui/material/ImageListItem';
</span><span class="token prefix inserted">+</span><span class="token line">import ImageListItemBar from '@mui/material/ImageListItemBar';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;GridList spacing={8} cellHeight={200}>
</span><span class="token prefix deleted">-</span><span class="token line">  &lt;GridListTile>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;ImageList gap={8} rowHeight={200}>
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;ImageListItem>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   &lt;img src="file.jpg" alt="Image title" />
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    &lt;GridListTileBar
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    &lt;ImageListItemBar
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     title="Title"
</span><span class="token prefix unchanged"> </span><span class="token line">     subtitle="Subtitle"
</span><span class="token prefix unchanged"> </span><span class="token line">   />
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/GridListTile>
</span><span class="token prefix deleted">-</span><span class="token line">&lt;/GridList>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;/ImageListItem>
</span><span class="token prefix inserted">+</span><span class="token line">&lt;/ImageList></span></span>

Hidden

Replace deprecated component

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

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

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Hidden implementation="css" xlUp>&lt;Paper />&lt;/Hidden>
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Hidden implementation="css" xlUp>&lt;button />&lt;/Hidden>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Paper sx={{ display: { xl: 'none', xs: 'block' } }} />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} /></span></span>

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Hidden implementation="css" mdDown>&lt;Paper />&lt;/Hidden>
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Hidden implementation="css" mdDown>&lt;button />&lt;/Hidden>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Paper sx={{ display: { xs: 'none', md: 'block' } }} />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Box component="button" sx={{ display: { xs: 'none', md: 'block' } }} /></span></span>

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

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Hidden implementation="js" xlUp>&lt;Paper />&lt;/Hidden>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const hidden = useMediaQuery(theme => theme.breakpoints.up('xl'));
</span><span class="token prefix inserted">+</span><span class="token line">return hidden ? null : &lt;Paper />;</span></span>

Icon

Remove fontSize="default"

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:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Icon fontSize="default">icon-name&lt;/Icon>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Icon>icon-name&lt;/Icon></span></span>

IconButton

✅ Update size prop

Padding for the default size has been reduced to 8px, bringing it down to 40px.

For the old default size of 48px, use size="large".

The change was made to better match Google's products when Material Design stopped documenting the icon button pattern.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> &lt;IconButton>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> &lt;IconButton size="large"></span></span>

Remove span and label

The span element that wraps children has been removed. The label classKey is also removed.

You can find out more details about this change in this GitHub pull request, it used to be necessary for iOS.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;button class="MuiIconButton-root">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;span class="MuiIconButton-label">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    &lt;svg />
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/span>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;/button></span></span>

Link

✅ Update default underline prop

The default underline prop is changed from "hover" to "always".

To recreate the behavior from v4, apply defaultProps in the theme.

<span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">MuiLink</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">underline</span><span class="token operator">:</span> <span class="token string">'hover'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

✅ Update transition props

The on* transition props were removed. Use TransitionProps instead.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Menu
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  onEnter={onEnter}
</span><span class="token prefix deleted">-</span><span class="token line">  onEntered={onEntered}
</span><span class="token prefix deleted">-</span><span class="token line">  onEntering={onEntering}
</span><span class="token prefix deleted">-</span><span class="token line">  onExit={onExit}
</span><span class="token prefix deleted">-</span><span class="token line">  onExited={onExited}
</span><span class="token prefix deleted">-</span><span class="token line">  onExiting={onExiting}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  TransitionProps={{
</span><span class="token prefix inserted">+</span><span class="token line">    onEnter,
</span><span class="token prefix inserted">+</span><span class="token line">    onEntered,
</span><span class="token prefix inserted">+</span><span class="token line">    onEntering,
</span><span class="token prefix inserted">+</span><span class="token line">    onExit,
</span><span class="token prefix inserted">+</span><span class="token line">    onExited,
</span><span class="token prefix inserted">+</span><span class="token line">    onExiting,
</span><span class="token prefix inserted">+</span><span class="token line">  }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">></span></span>

Change default anchorOrigin.vertical value

Change the default value of anchorOrigin.vertical to follow the Material Design guidelines.

The menu is now displayed below the anchor instead of on top of it.

You can restore the previous behavior with:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Menu
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  anchorOrigin={{
</span><span class="token prefix inserted">+</span><span class="token line">    vertical: 'top',
</span><span class="token prefix inserted">+</span><span class="token line">    horizontal: 'left',
</span><span class="token prefix inserted">+</span><span class="token line">  }}</span></span>

MenuItem

Update CSS class names

The MenuItem component inherits the ButtonBase component instead of ListItem.

The class names related to "MuiListItem-*" have been removed, and theming ListItem no longer has an effect on MenuItem.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;li className="MuiButtonBase-root MuiMenuItem-root"></span></span>

Replace listItemClasses prop

prop listItemClasses is removed, use classes instead.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;MenuItem listItemClasses={{...}}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;MenuItem classes={{...}}></span></span>

✅ Remove disableBackdropClick prop

Remove the disableBackdropClick prop because it is redundant.

Use onClose with reason === 'backdropClick' instead.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Modal
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  disableBackdropClick
</span><span class="token prefix deleted">-</span><span class="token line">  onClose={handleClose}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  onClose={(event, reason) => {
</span><span class="token prefix inserted">+</span><span class="token line">    if (reason !== 'backdropClick') {
</span><span class="token prefix inserted">+</span><span class="token line">      handleClose(event, reason);
</span><span class="token prefix inserted">+</span><span class="token line">    }
</span><span class="token prefix inserted">+</span><span class="token line">  }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">/></span></span>

✅ Remove `onEscapeKeyDown` prop

Remove the onEscapeKeyDown prop because it is redundant.

Use onClose with reason === "escapeKeyDown" instead.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Modal
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  onEscapeKeyDown={handleEscapeKeyDown}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  onClose={(event, reason) => {
</span><span class="token prefix inserted">+</span><span class="token line">    if (reason === 'escapeKeyDown') {
</span><span class="token prefix inserted">+</span><span class="token line">      handleEscapeKeyDown(event);
</span><span class="token prefix inserted">+</span><span class="token line">    }
</span><span class="token prefix inserted">+</span><span class="token line">  }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">/></span></span>

Remove `onRendered` prop

Remove the onRendered prop.

Depending on your use case, you can either use a callback ref on the child element, or an effect hook in the child component.

NativeSelect

Remove selectMenu slot

Merge the selectMenu slot into select. The selectMenu slot was redundant.

The root slot is no longer applied to the select, but to the root.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;NativeSelect classes={{ root: 'class1', select: 'class2', selectMenu: 'class3' }} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;NativeSelect classes={{ select: 'class1 class2 class3' }} /></span></span>

OutlinedInput

Replace labelWidth prop

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.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;OutlinedInput labelWidth={20} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;OutlinedInput label="First Name" /></span></span>

Paper

Change dark mode background opacity

Change the background opacity based on the elevation in dark mode.

This change was made to better conform to the Material Design guidelines.

You can revert it in the theme:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const theme = createTheme({
</span><span class="token prefix unchanged"> </span><span class="token line">  components: {
</span><span class="token prefix unchanged"> </span><span class="token line">    MuiPaper: {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      styleOverrides: { root: { backgroundImage: 'unset' } },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">  },
</span><span class="token prefix unchanged"> </span><span class="token line">});</span></span>

Pagination

✅ Update import

Move the component from the lab to the core.

The component is now stable.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import Pagination from '@mui/lab/Pagination';
</span><span class="token prefix deleted">-</span><span class="token line">import PaginationItem from '@mui/lab/PaginationItem';
</span><span class="token prefix deleted">-</span><span class="token line">import { usePagination } from '@mui/lab/Pagination';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Pagination from '@mui/material/Pagination';
</span><span class="token prefix inserted">+</span><span class="token line">import PaginationItem from '@mui/material/PaginationItem';
</span><span class="token prefix inserted">+</span><span class="token line">import usePagination from '@mui/material/usePagination';</span></span>

✅ Rename round to circular

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Pagination shape="round">
</span><span class="token prefix deleted">-</span><span class="token line">&lt;PaginationItem shape="round">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Pagination shape="circular">
</span><span class="token prefix inserted">+</span><span class="token line">&lt;PaginationItem shape="circular"></span></span>

✅ Update transition props

The on* transition props were removed.

Use TransitionProps instead.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;Popover
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  onEnter={onEnter}
</span><span class="token prefix deleted">-</span><span class="token line">  onEntered={onEntered}
</span><span class="token prefix deleted">-</span><span class="token line">  onEntering={onEntering}
</span><span class="token prefix deleted">-</span><span class="token line">  onExit={onExit}
</span><span class="token prefix deleted">-</span><span class="token line">  onExited={onExited}
</span><span class="token prefix deleted">-</span><span class="token line">  onExiting={onExiting}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  TransitionProps={{
</span><span class="token prefix inserted">+</span><span class="token line">    onEnter,
</span><span class="token prefix inserted">+</span><span class="token line">    onEntered,
</span><span class="token prefix inserted">+</span><span class="token line">    onEntering,
</span><span class="token prefix inserted">+</span><span class="token line">    onExit,
</span><span class="token prefix inserted">+</span><span class="token line">    onExited,
</span><span class="token prefix inserted">+</span><span class="token line">    onExiting,
</span><span class="token prefix inserted">+</span><span class="token line">  }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ></span></span>

Remove getContentAnchorEl prop

The getContentAnchorEl prop was removed to simplify the positioning logic.

Popper

Upgrade from v1 to v2

Upgrade Popper.js from v1 to v2.

The CSS prefixes have changed:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> popper: {
</span><span class="token prefix unchanged"> </span><span class="token line">   zIndex: 1,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  '&amp;[x-placement*="bottom"] .arrow': {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  '&amp;[data-popper-placement*="bottom"] .arrow': {</span></span>

Method names have changed:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">popperRef.current.scheduleUpdate()
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">popperRef.current.update()</span></span>

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">popperRef.current.update()
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">popperRef.current.forceUpdate()</span></span>

The Modifiers API has been changed too significantly to fully cover here.

Read the Popper.js migration guide for complete details.

Portal

Remove onRendered prop

Remove the onRendered prop.

Depending on your use case, you can either use a callback ref on the child element, or an effect hook in the child component.

Radio

Update default color prop

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.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Radio />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Radio color="secondary" /></span></span>

Update CSS classes

This component no longer has the class names .MuiIconButton-root or .MuiIconButton-label.

Instead, target .MuiButtonBase-root.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> &lt;span class="MuiIconButton-root MuiButtonBase-root MuiRadio-root PrivateSwitchBase-root">
</span><span class="token prefix deleted">-</span><span class="token line">   &lt;span class="MuiIconButton-label">
</span><span class="token prefix deleted">-</span><span class="token line">     &lt;input class="PrivateSwitchBase-input">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> &lt;span class="MuiButtonBase-root MuiRadio-root PrivateSwitchBase-root">
</span><span class="token prefix inserted">+</span><span class="token line">   &lt;span class="PrivateSwitchBase-input"></span></span>

Rating

✅ Update imports

Move the component from the lab to the core.

The component is now stable.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import Rating from '@mui/lab/Rating';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Rating from '@mui/material/Rating';</span></span>

Change default empty icon

Change the default empty icon to improve accessibility.

If you have a custom icon prop but no emptyIcon prop, you can restore the previous behavior with:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Rating
</span><span class="token prefix unchanged"> </span><span class="token line">  icon={customIcon}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  emptyIcon={null}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">/></span></span>

Rename visuallyhidden

Rename visuallyhidden to visuallyHidden for consistency:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;Rating
</span><span class="token prefix unchanged"> </span><span class="token line">   classes={{
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    visuallyhidden: 'custom-visually-hidden-classname',
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    visuallyHidden: 'custom-visually-hidden-classname',
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }}
</span><span class="token prefix unchanged"> </span><span class="token line"> /></span></span>

RootRef

Remove component

This component has been removed.

You can get a reference to the underlying DOM node of our components via ref prop.

The component relied on ReactDOM.findDOMNode which is deprecated in React.StrictMode.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;RootRef rootRef={ref}>
</span><span class="token prefix deleted">-</span><span class="token line">  &lt;Button />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;/RootRef>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Button ref={ref} /></span></span>

Select

✅ Update default variant

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.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Select value="Standard" />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Select value="Outlined" variant="outlined" />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Select value="Standard" variant="standard" />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Select value="Outlined" /></span></span>

Replace labelWidth prop

Remove the labelWidth prop.

The label prop now fulfills the same purpose, using the CSS layout instead of JavaScript measurements to render the gap in the outlined variant.

The TextField already handles this by default.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Select variant="outlined" labelWidth={20} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Select variant="outlined" label="Gender" /></span></span>

Remove selectMenu slot

Merge the selectMenu slot into select. The selectMenu slot was redundant.

The root slot is no longer applied to the select, but to the root.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Select classes={{ root: 'class1', select: 'class2', selectMenu: 'class3' }} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Select classes={{ select: 'class1 class2 class3' }} /></span></span>

Update event type (TypeScript)

The event in onChange is now typed as a SelectChangeEvent<T> instead of a React.ChangeEvent.

<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import Select, { SelectChangeEvent } from '@mui/material/Select';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Select onChange={(event: React.SyntheticEvent, value: unknown) => {}} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Select onChange={(event: SelectChangeEvent&lt;T>, child: React.ReactNode) => {}} /></span></span>

This was necessary to prevent overriding the event.target of the events that caused the change.

Skeleton

✅ Update import

Move the component from the lab to the core.

The component is now stable.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import Skeleton from '@mui/lab/Skeleton';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Skeleton from '@mui/material/Skeleton';</span></span>

✅ Rename circle and rect

Rename circle to circular and rect to rectangular for consistency:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Skeleton variant="circle" />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Skeleton variant="rect" />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Skeleton classes={{ circle: 'custom-circle-classname', rect: 'custom-rect-classname',  }} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Skeleton variant="circular" />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Skeleton variant="rectangular" />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} /></span></span>

Slider

Update event type (TypeScript)

The event in onChange is now typed as a React.SyntheticEvent instead of a React.ChangeEvent.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Slider onChange={(event: React.SyntheticEvent, value: unknown) => {}} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Slider onChange={(event: Event, value: unknown) => {}} /></span></span>

This was necessary to prevent overriding the event.target of the events that caused the change.

Replace ValueLabelComponent and ThumbComponent props

The ValueLabelComponent and ThumbComponent props are now part of the components prop.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;Slider
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  ValueLabelComponent={CustomValueLabel}
</span><span class="token prefix deleted">-</span><span class="token line">  ThumbComponent={CustomThumb}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  components={{
</span><span class="token prefix inserted">+</span><span class="token line">    ValueLabel: CustomValueLabel,
</span><span class="token prefix inserted">+</span><span class="token line">    Thumb: CustomThumb,
</span><span class="token prefix inserted">+</span><span class="token line">  }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> /></span></span>

Refactor CSS

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

Update default positioning

The notification now displays at the bottom left on large screens.

This better matches the behavior of Gmail, Google Keep, material.io, etc.

You can restore the v4 behavior with:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Snackbar />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} /></span></span>

✅ Update transition props

The on* transition props were removed.

Use TransitionProps instead.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">&lt;Snackbar
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  onEnter={onEnter}
</span><span class="token prefix deleted">-</span><span class="token line">  onEntered={onEntered}
</span><span class="token prefix deleted">-</span><span class="token line">  onEntering={onEntering}
</span><span class="token prefix deleted">-</span><span class="token line">  onExit={onExit}
</span><span class="token prefix deleted">-</span><span class="token line">  onExited={onExited}
</span><span class="token prefix deleted">-</span><span class="token line">  onExiting={onExiting}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  TransitionProps={{
</span><span class="token prefix inserted">+</span><span class="token line">    onEnter,
</span><span class="token prefix inserted">+</span><span class="token line">    onEntered,
</span><span class="token prefix inserted">+</span><span class="token line">    onEntering,
</span><span class="token prefix inserted">+</span><span class="token line">    onExit,
</span><span class="token prefix inserted">+</span><span class="token line">    onExited,
</span><span class="token prefix inserted">+</span><span class="token line">    onExiting,
</span><span class="token prefix inserted">+</span><span class="token line">  }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">></span></span>

SpeedDial

✅ Update import

Move the component from the lab to the core.

The component is now stable.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import SpeedDial from '@mui/lab/SpeedDial';
</span><span class="token prefix deleted">-</span><span class="token line">import SpeedDialAction from '@mui/lab/SpeedDialAction';
</span><span class="token prefix deleted">-</span><span class="token line">import SpeedDialIcon from '@mui/lab/SpeedDialIcon';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import SpeedDial from '@mui/material/SpeedDial';
</span><span class="token prefix inserted">+</span><span class="token line">import SpeedDialAction from '@mui/material/SpeedDialAction';
</span><span class="token prefix inserted">+</span><span class="token line">import SpeedDialIcon from '@mui/material/SpeedDialIcon';</span></span>

Stepper

Update component structure

The root component Paper was replaced with a <div>.

Stepper no longer has elevation, and it does not inherit props from Paper anymore. This change is meant to encourage composition.

<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Paper square elevation={2}>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;Stepper elevation={2}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;Stepper>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;Step>
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;StepLabel>Hello world&lt;/StepLabel>
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;/Step>
</span><span class="token prefix unchanged"> </span><span class="token line">   &lt;/Stepper>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Paper></span></span>

Remove built-in padding

The built-in 24px padding has been removed.

To keep it intact, add the following:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Stepper>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Stepper style={{ padding: 24 }}>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   &lt;Step>
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;StepLabel>Hello world&lt;/StepLabel>
</span><span class="token prefix unchanged"> </span><span class="token line">   &lt;/Step>
</span><span class="token prefix unchanged"> </span><span class="token line"> &lt;/Stepper></span></span>

SvgIcon

Remove fontSize="default"

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:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;SvgIcon fontSize="default">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;SvgIcon>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  &lt;path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</span><span class="token prefix unchanged"> </span><span class="token line">&lt;/SvgIcon></span></span>

Switch

Remove second onChange argument

The second argument from onChange has been deprecated.

You can pull out the checked state by accessing event.target.checked.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function MySwitch() {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  const handleChange = (event: React.ChangeEvent&lt;HTMLInputElement>, checked: boolean) => {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  const handleChange = (event: React.ChangeEvent&lt;HTMLInputElement>) => {
</span><span class="token prefix inserted">+</span><span class="token line">    const checked = event.target.checked;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  };
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return &lt;Switch onChange={handleChange} />;
</span><span class="token prefix unchanged"> </span><span class="token line">}</span></span>

Update default color prop

The color prop is now "primary" by default.

To continue using the "secondary" color, you must explicitly indicate secondary.

This brings Switch closer to the Material Design guidelines.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Switch />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Switch color="secondary" /></span></span>

Update CSS classes

This component no longer has the .MuiIconButton-root and .MuiIconButton-label.

Instead, target .MuiButtonBase-root.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;span class="MuiSwitch-root">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;span class="MuiIconButton-root MuiButtonBase-root MuiSwitch-switchBase PrivateSwitchBase-root">
</span><span class="token prefix deleted">-</span><span class="token line">    &lt;span class="MuiIconButton-label">
</span><span class="token prefix deleted">-</span><span class="token line">      &lt;input class="MuiSwitch-input PrivateSwitchBase-input">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  &lt;span class="MuiButtonBase-root MuiSwitch-switchBase PrivateSwitchBase-root">
</span><span class="token prefix inserted">+</span><span class="token line">    &lt;span class="MuiSwitch-input PrivateSwitchBase-input"></span></span>

Table

Rename default padding prop value

Rename the default value of the padding prop to normal.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Table padding="default" />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;TableCell padding="default" />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Table padding="normal" />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;TableCell padding="normal" /></span></span>

TablePagination

Customize labels with getItemAriaLabel prop

The customization of the table pagination's actions labels must be done with the getItemAriaLabel prop.

This increases consistency with the Pagination component.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;TablePagination
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  backIconButtonText="Back"
</span><span class="token prefix deleted">-</span><span class="token line">  nextIconButtonText="Next"
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  getItemAriaLabel={…}</span></span>

✅ Rename onChangeRowsPerPage and onChangePage

Rename onChangeRowsPerPage to onRowsPerPageChange and onChangePage to onPageChange for API consistency.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;TablePagination
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  onChangeRowsPerPage={()=>{}}
</span><span class="token prefix deleted">-</span><span class="token line">  onChangePage={()=>{}}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  onRowsPerPageChange={()=>{}}
</span><span class="token prefix inserted">+</span><span class="token line">  onPageChange={()=>{}}</span></span>

Separate label classes

Separate classes for different table pagination labels.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;TablePagination
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  classes={{ caption: 'foo' }}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  classes={{ selectLabel: 'foo', displayedRows: 'foo' }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> /></span></span>

Move custom class on input to select

Move the custom class on input to select.

The input key is applied on another element.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;TablePagination
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  classes={{ input: 'foo' }}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  classes={{ select: 'foo' }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> /></span></span>

Tabs

Update default indicatorColor and textColor prop values

Change the default indicatorColor and textColor prop values to "primary".

This is done to match the most common use cases with Material Design.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Tabs />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Tabs indicatorColor="secondary" textColor="inherit" /></span></span>

Update event type (TypeScript)

The event in onChange is now typed as a React.SyntheticEvent instead of a React.ChangeEvent.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Tabs onChange={(event: React.ChangeEvent&lt;{}>, value: unknown) => {}} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Tabs onChange={(event: React.SyntheticEvent, value: unknown) => {}} /></span></span>

✅ Add new scroll button props

The API that controls the scroll buttons has been split into two props.

The scrollButtons prop controls when the scroll buttons are displayed depending on the space available.
The allowScrollButtonsMobile prop removes the CSS media query that systematically hides the scroll buttons on mobile.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Tabs scrollButtons="on" />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Tabs scrollButtons="desktop" />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;Tabs scrollButtons="off" />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Tabs scrollButtons allowScrollButtonsMobile />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Tabs scrollButtons />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;Tabs scrollButtons={false} /></span></span>

Tab

Update default minWidth and maxWidth

Default minimum and maximum widths have been changed to match the Material Design specifications:

minWidth was changed from 72px to 90px.
maxWidth was changed from 264px to 360px.

Remove span and wrapper

The span element that wraps children has been removed. The wrapper classKey is also removed.

You can find out more details about this change in this GitHub pull request.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;button class="MuiTab-root">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;span class="MuiTab-wrapper">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     {icon}
</span><span class="token prefix unchanged"> </span><span class="token line">     {label}
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/span>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;/button></span></span>

TextField

✅ Update default variant

Change the default variant from standard to outlined.

standard has been removed from the Material Design guidelines.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;TextField value="Standard" />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;TextField value="Outlined" variant="outlined" />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;TextField value="Standard" variant="standard" />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;TextField value="Outlined" /></span></span>

✅ Rename rowsMax

Rename rowsMax prop to maxRows for consistency with HTML attributes.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;TextField rowsMax={6}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;TextField maxRows={6}></span></span>

✅ Replace rows with minRows

Rename rows prop to minRows for dynamic resizing.

You need to use the minRows prop in the following case:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;TextField rows={2} maxRows={5} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;TextField minRows={2} maxRows={5} /></span></span>

Forward ref instead of inputRef prop

Change ref forwarding expectations on custom inputComponent.

The component should forward the ref prop instead of the inputRef prop.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">function NumberFormatCustom(props) {
</span><span class="token prefix deleted">-</span><span class="token line">  const { inputRef, onChange, ...other } = props;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const NumberFormatCustom = React.forwardRef(function NumberFormatCustom(
</span><span class="token prefix inserted">+</span><span class="token line">  props,
</span><span class="token prefix inserted">+</span><span class="token line">  ref,
</span><span class="token prefix inserted">+</span><span class="token line">) {
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> const { onChange, ...other } = props;
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> return (
</span><span class="token prefix unchanged"> </span><span class="token line">   &lt;NumberFormat
</span><span class="token prefix unchanged"> </span><span class="token line">     {...other}
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">     getInputRef={inputRef}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     getInputRef={ref}</span></span>

Rename marginDense and inputMarginDense classes

Rename marginDense and inputMarginDense classes to sizeSmall and inputSizeSmall to match the prop.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Input margin="dense" />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Input size="small" /></span></span>

Update InputAdornment position prop

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.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;TextField startAdornment={&lt;InputAdornment>kg&lt;/InputAdornment>} />
</span><span class="token prefix deleted">-</span><span class="token line">&lt;TextField endAdornment={&lt;InputAdornment>kg&lt;/InputAdornment>} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;TextField startAdornment={&lt;InputAdornment position="start">kg&lt;/InputAdornment>} />
</span><span class="token prefix inserted">+</span><span class="token line">&lt;TextField endAdornment={&lt;InputAdornment position="end">kg&lt;/InputAdornment>} /></span></span>

TextareaAutosize

✅ Replace rows with minRows

Remove the rows prop, use the minRows prop instead.

This change aims to clarify the behavior of the prop.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;TextareaAutosize rows={2} />
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;TextareaAutosize minRows={2} /></span></span>

✅ Rename rowsMax

Rename rowsMax prop to maxRows for consistency with HTML attributes.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;TextareaAutosize rowsMax={6}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;TextareaAutosize maxRows={6}></span></span>

✅ Rename rowsMin

Rename rowsMin prop with minRows for consistency with HTML attributes.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;TextareaAutosize rowsMin={1}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;TextareaAutosize minRows={1}></span></span>

ToggleButton

✅ Update import

Move the component from the lab to the core.

The component is now stable.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import ToggleButton from '@mui/lab/ToggleButton';
</span><span class="token prefix deleted">-</span><span class="token line">import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import ToggleButton from '@mui/material/ToggleButton';
</span><span class="token prefix inserted">+</span><span class="token line">import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';</span></span>

Remove span and label

The span element that wraps children has been removed. The label classKey is also removed.

You can find out more details about this change in this GitHub pull request.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;button class="MuiToggleButton-root">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;span class="MuiToggleButton-label">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     {children}
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  &lt;/span>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;/button></span></span>

Interactive by default

Tooltips are now interactive by default.

The previous default behavior failed the success criterion 1.4.3 ("hoverable") in WCAG 2.1.

To reflect the new default value, the prop was renamed to disableInteractive.

If you want to restore the v4 behavior, you can apply the following diff:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Tooltip>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Tooltip disableInteractive>
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"># Interactive tooltips no longer need the `interactive` prop.
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Tooltip interactive>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Tooltip></span></span>

Typography

Remove srOnly variant

Remove the srOnly variant.

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

<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { visuallyHidden } from '@mui/utils';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Typography variant="srOnly">Create a user&lt;/Typography>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;span style={visuallyHidden}>Create a user&lt;/span></span></span>

Remove color and style override keys

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 rather than the Typography component itself.

If you still wish to add overrides for them, you can use the callback as a value in styleOverrides.

For example:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const theme = createTheme({
</span><span class="token prefix unchanged"> </span><span class="token line">  components: {
</span><span class="token prefix unchanged"> </span><span class="token line">    MuiTypography: {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">      styleOverrides: {
</span><span class="token prefix deleted">-</span><span class="token line">        colorSecondary: {
</span><span class="token prefix deleted">-</span><span class="token line">          marginTop: '20px',
</span><span class="token prefix deleted">-</span><span class="token line">        },
</span><span class="token prefix deleted">-</span><span class="token line">      },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      styleOverrides: ({ ownerState }) => ({
</span><span class="token prefix inserted">+</span><span class="token line">        ...ownerState.color === 'secondary' &amp;&amp; {
</span><span class="token prefix inserted">+</span><span class="token line">          marginTop: '20px',
</span><span class="token prefix inserted">+</span><span class="token line">        },
</span><span class="token prefix inserted">+</span><span class="token line">      }),
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">  },
</span><span class="token prefix unchanged"> </span><span class="token line">});</span></span>

Theme

Default background colors

The default background color is now #fff in light mode and #121212 in dark mode.

This matches the Material Design guidelines.

✅ Breakpoint behavior

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 start (inclusive) and end (exclusive) values.

When using the down() breakpoints utility, you need to update the breakpoint key by one step up.

When using between(start, end), the end breakpoint should also be updated by one step up.

Here are some examples of the changes required:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">theme.breakpoints.down('sm') // '@media (max-width:959.95px)' - [0, sm + 1) => [0, md)
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">theme.breakpoints.down('md') // '@media (max-width:959.95px)' - [0, md)</span></span>

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">theme.breakpoints.between('sm', 'md') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, md + 1) => [0, lg)
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">theme.breakpoints.between('sm', 'lg') // '@media (min-width:600px) and (max-width:1279.95px)' - [0, lg)</span></span>

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">theme.breakpoints.between('sm', 'xl') // '@media (min-width:600px)'
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">theme.breakpoints.up('sm') // '@media (min-width:600px)'</span></span>

The same should be done when using the Hidden component:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Hidden smDown>{...}&lt;/Hidden> // '@media (min-width:600px)'
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Hidden mdDown>{...}&lt;/Hidden> // '@media (min-width:600px)'</span></span>

Breakpoint sizes

The default breakpoints were changed to better match common use cases as well as the Material Design guidelines.

You can find out more details about this change in this GitHub issue

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">{
</span><span class="token prefix unchanged"> </span><span class="token line">  xs: 0,
</span><span class="token prefix unchanged"> </span><span class="token line">  sm: 600,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  md: 960,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  md: 900,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  lg: 1280,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  lg: 1200,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  xl: 1920,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  xl: 1536,
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">}</span></span>

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

<span class="token keyword">import</span> <span class="token punctuation">{</span> createTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material/styles'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">breakpoints</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">values</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">xs</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      <span class="token literal-property property">sm</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span>
      <span class="token literal-property property">md</span><span class="token operator">:</span> <span class="token number">960</span><span class="token punctuation">,</span>
      <span class="token literal-property property">lg</span><span class="token operator">:</span> <span class="token number">1280</span><span class="token punctuation">,</span>
      <span class="token literal-property property">xl</span><span class="token operator">:</span> <span class="token number">1920</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

✅ Replace theme.breakpoints.width

The theme.breakpoints.width utility has been removed because it was redundant.

Use theme.breakpoints.values to get the same values.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">theme.breakpoints.width('md')
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">theme.breakpoints.values.md</span></span>

Update theme.palette.augmentColor helper

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

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">theme.palette.augmentColor(red);
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">theme.palette.augmentColor({ color: red, name: 'brand' });</span></span>

Remove theme.typography.round helper

The theme.typography.round helper was removed because it was no longer used.

If you need it, use the function below:

<span class="token keyword">function</span> <span class="token function">round</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>value <span class="token operator">*</span> <span class="token number">1e5</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1e5</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

@mui/types

Rename the exported Omit type

The module is now called DistributiveOmit.

This 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 Stack Overflow answer for further details.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import { Omit } from '@mui/types';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { DistributiveOmit } from '@mui/types';</span></span>

Breaking changes in v5, part two: core components

Material UI v5 migration

Breaking changes, part two

AppBar

Fix z-index issues

Replace color prop for dark mode

Alert

✅ Update import

Autocomplete

✅ Update import

Remove debug prop

Update renderOption

✅ Rename closeIcon to clearIcon

Rename reason arguments

✅ Rename getOptionSelected

Avatar

✅ Rename circle

✅ Update AvatarGroup import

Badge

✅ Rename circle and rectangle

BottomNavigation

Update event type (TypeScript)

BottomNavigationAction

Remove span and wrapper

Box

✅ Update borderRadius prop value

✅ Apply sx API

✅ Rename CSS properties

Remove clone prop

Replace render prop with sx

Button

✅ Remove default color prop

Remove span and label

Chip

✅ Rename default to filled

Checkbox

Set to "primary" by default

Update CSS class names

CircularProgress

✅ Rename static to determinate

Collapse

✅ Rename collapsedHeight prop

CssBaseline

Update styled-engine

Update body font size

Dialog

✅ Update transition props

✅ Remove disableBackdropClick prop

Remove withMobileDialog component

✅ Remove disableTypography prop

Divider

Replace background-color with border-color

Support "middle" variant with "vertical" orientation

ExpansionPanel

✅ Rename components

Update event type (TypeScript)

ExpansionPanelDetails

Remove display: flex

ExpansionPanelSummary

Rename focused to focusVisible

Remove IconButtonProps prop

Fab

✅ Rename round to circular

Remove span and label

FormControl

✅ Update default variant

FormControlLabel

Add required label prop

Grid

✅ Rename justify prop

✅ Remove align and justify props and classes

Change negative margins

GridList

✅ Rename GridList component

Rename GridList props

Use CSS object-fit

Hidden

Replace deprecated component

Icon

Remove fontSize="default"

Update `renderOption`

✅ Rename `closeIcon` to `clearIcon`

Replace render prop with `sx`

✅ Remove `onEscapeKeyDown` prop

Remove `onRendered` prop