github mui-org/material-ui v5.0.0-alpha.38

Jun 23, 2021

Big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:

  • 🚀 We have only 2 left in the breaking changes. The plan to release 5.0.0-beta.0 is on July 1st and will start to promote its usage over v4.
  • 🎨 We have updated Slider to match current Material Design guidelines.

  • 💡 IconButton now supports 3 sizes (small, medium, large). See demo.
  • ♿️ We have improved the default style of the Link to be more accessible (#26145) @ahmed-28


Breaking changes

  • [Menu] Use ButtonBase in MenuItem (#26591) @siriwatknp

    • Change the default value of anchorOrigin.vertical to follow the Material Design guidelines. The menu now displays below the anchor instead of on top of it. You can restore the previous behavior with:
    +  anchorOrigin={{
    +    vertical: 'top',
    +    horizontal: 'left',
    +  }}
    • The MenuItem component inherits the ButtonBase component instead of ListItem. The class names related to "MuiListItem-*" are removed and theming ListItem is no longer affecting MenuItem.

      -<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
      +<li className="MuiButtonBase-root MuiMenuItem-root">
      • The prop listItemClasses was removed, you can use classes instead.
        diff -<MenuItem listItemClasses={{...}}> +<MenuItem classes={{...}}>
    • [theme] Improve default breakpoints (#26746) @siriwatknp
      The default breakpoints were changed to better match the common use cases. They also better match the Material Design guidelines. Read more about the change.
      xs: 0,
      sm: 600,

    • md: 960,

    • md: 900,

    • lg: 1280,

    • lg: 1200,

    • xl: 1920,

    • xl: 1536,

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

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

  const theme = createTheme({
    breakpoints: {
      values: {
        xs: 0,
        sm: 600,
        md: 960,
        lg: 1280,
        xl: 1920,
  • [IconButton] Add size large and update styles (#26748) @siriwatknp

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

  - <IconButton>
  + <IconButton size="large">
  • [Slider] Adjust css to match the specification (#26632) @siriwatknp

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.

  • [IconButton] Remove label span (#26801) @siriwatknp

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

  <button class="MuiIconButton-root">
  - <span class="MuiIconButton-label">
      <svg />
  - </span>
  • [core] Remove unstable_ prefix on the useThemeProps hook (#26777) @mnajdova

The following utilities were renamed to not contain the unstable_ prefix:

  • @material-ui/sytstem
   import {
  -  unstable_useThemeProps,
  +  useThemeProps,
   } from '@material-ui/system';
  • @material-ui/core
   import {
  -  unstable_useThemeProps,
  +  useThemeProps,
   } from '@material-ui/core/styles';


  • [Alert] Add support for custom colors (#26831) @varandasi
  • [Button] Fix loading text invisible when disabled (#26857) @DanielBretzigheimer
  • [ButtonBase] Consider as a link with a custom component and to prop (#26576) @shadab14meb346
  • [ButtonBase] Derive state on render instead of in layout effects (#26762) @eps1lon
  • [Drawer] Fix incorrect z-index (#26791) @michal-perlakowski
  • [Drawer] Remove incorrect transition handler props (#26835) @eps1lon
  • [Link] Improve accessibility support (#26145) @ahmed-28
  • [Modal] Fix calculating scrollbar size when using custom scrollbar (#26816) @michal-perlakowski
  • [Rating] Make input ids less predictable (#26493) @eps1lon
  • [Stepper] Add componentsProps.label to StepLabel (#26807) @michal-perlakowski
  • [Tabs] Show error when Tab has display: none (#26783) @michal-perlakowski
  • [theme] Add base color palette type to components (#26697) @siriwatknp


Breaking Changes

  • [system] Normalize api for createBox (#26820) @mnajdova
   import { createBox } from '@material-ui/system';

  -const styled = createBox(defaultTheme);
  +const styled = createBox({ defaultTheme });


  • [system] Add ThemeProvider component (#26787) @mnajdova


  • [docs] Fix misspelling of the word Typography (#26898) @dmrqx
  • [docs] Instruct users to install @material-ui/icons with the next tag (#26873) @michal-perlakowski
  • [docs] Sync translations (#26828) @l10nbot
  • [docs] Improve grammar of autocomplete/autofill section (#26798) @dijonkitchen
  • [docs] Explain "inherited props" better in the props table (#26778) @eps1lon
  • [docs] Fix documentation for upgrading to v5 (#26812) @tungdt-90
  • [docs] Improve notification color (#26796) @mnajdova
  • [docs] Fix various a11y issues with /customization/color (#26757) @eps1lon
  • [docs] Move custom theme to frame (#26744) @siriwatknp
  • [docs] Fix small PT typo fix: inciar -> iniciar (#26775) @brunocavalcante
  • [I10n] Add Chinese (Hong Kong) (zh-HK) locale (#26637) @kshuiroy
  • [l10n] Add sinhalese (siLK) locale (#26875) @pavinduLakshan
  • [examples] Rename nextjs typescript theme from tsx to ts (#26862) @Izhaki


  • [test] Fix Drawer test API @oliviertassinari
  • [test] Adjust expected useAutocomplete error messages for React 18 (#26858) @eps1lon
  • [test] Convert Drawer tests to testing-library (#26837) @eps1lon
  • [test] Convert remaining enzyme tests to testing-library (#26832) @eps1lon
  • [test] Ignore ReactDOM.hydrate deprecation warnings (#26815) @eps1lon
  • [test] Reduce flakiness (#26761) @eps1lon
  • [useId] Reduce likelyhood of collisions (#26758) @eps1lon
  • yarn deduplicate @oliviertassinari
  • Fix running framer's prettier under pwsh (#26819) @michaldudak
  • [core] Update babel-plugin-optimize-clsx (#26861) @oliviertassinari
  • [core] Assume no document.all at runtime (#26821) @eps1lon
  • [core] Remove dependency on @material-ui/private-theming (#26793) @mnajdova
  • [core] Remove dependency on @material-ui/styled-engine (#26792) @mnajdova

All contributors of this release in alphabetical order: @ahmed-28, @brunocavalcante, @DanielBretzigheimer, @dijonkitchen, @dmrqx, @eps1lon, @Izhaki, @kshuiroy, @l10nbot, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @pavinduLakshan, @shadab14meb346, @siriwatknp, @tungdt-90, @varandasi

latest releases: v5.0.0-beta.2, v4.12.2, v5.0.0-beta.1...
pre-releaseone month ago