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

Jun 8, 2021

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

  • βš’οΈ We've introduced a new ListItemButton component that should prevent common mistakes when using <ListItem button /> and help with customization and TypeScript support (#26446) @siriwatknp.
  • πŸ‘©β€πŸŽ€ experimentalStyled is now available without the experimental prefix.
    We're confident that its API shouldn't receive any major changes until the stable release of v5 (#26558) @mnajdova.
  • πŸ“¦ @material-ui/icons only ships ES modules and no longer CommonJS modules.
    This reduces the download size of the package from 1.7 MB to 1.2 MB and install size from 15.6 MB to 6.7 MB (#26310) @eps1lon.
  • πŸ’„ Add support for row and column spacing in the Grid component (#26559) @likitarai1.
    grid spacing demo

Note that this feature was already available for CSS grid users with the rowGap and columnGap props.


Breaking changes

  • [AppBar] Fix background color on dark mode (#26545) @siriwatknp

The color prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the Material Design guidelines. Use enableColorOnDark to restore the behavior of v4.

  <AppBar enableColorOnDark />
  • [core] Rename experimentalStyled to styled (#26558) @mnajdova

Remove the experimental prefix, this module is going stable:

  -import { experimentalStyled as styled } from '@material-ui/core/styles';
  +import { styled } from '@material-ui/core/styles';
  • [SwitchBase] Replace IconButton with ButtonBase (#26460) @siriwatknp
  • [theme] Improve default primary, secondary and error theme palette (#26555) @siriwatknp


  • [Box] Fix module 'clsx' not found in system (#26553) @coder-freestyle
  • [Box] Fix runtime error when using styled-components without ThemeProvider (#26548) @mnajdova
  • [Radio][Checkbox] Don't forward color to DOM elements (#26625) @siriwatknp
  • [Dialog] Flatten DialogTitle DOM structure, remove disableTypography (#26323) @eps1lon
  • [Grid] Add rowSpacing and columnSpacing props (#26559) @likitarai1
  • [List] extract button from ListItem to ListItemButton (#26446) @siriwatknp
  • [Popover] Fix PaperProps.ref breaking positioning (#26560) @vedadeepta
  • [Rating] onChangeActive shouldn't be fired on blur/focus (#26584) @coder-freestyle
  • [Select] Fix custom font size centering arrow (#26570) @sarahannnicholson
  • [styled] Convert implicit styleProps to explicit (#26461) @mnajdova@siriwatknp
  • [Tabs] Fix RTL indicator (#26470) @siriwatknp
  • [Tabs] Fix arrow rotation in vertical & RTL (#26527) @siriwatknp
  • [TextField] Fix support for custom size prop value (#26585) @coder-freestyle
  • [Tooltip] Finish exiting once started (#26535) @eps1lon


Breaking changes

  • [icons] Only ship ES modules (#26310) @eps1lon

The require() of @material-ui/icons is no longer supported.
This should not affect you if you're using a bundler like webpack or snowpack or meta frameworks like next or gatsby.


Breaking changes

  • [pickers] Remove openPickerIcon prop in favor of components.OpenPickerIcon (#26223) @vedadeepta
      LeftArrowIcon: AlarmIcon,
      RightArrowIcon: SnoozeIcon,
  +   OpenPickerIcon: ClockIcon,
  - openPickerIcon={<ClockIcon />}


  • [system] Add createTheme util (#26490) @mnajdova


  • [docs] Migrate templates to emotion (#26604) @vicasas
  • [docs] Remove custom primary & secondary color (#26541) @siriwatknp
  • [docs] Don't escape prop descriptions for markdown table context (#26579) @eps1lon
  • [docs] Prepare for data grid auto-generated docs (#26477) @m4theushw
  • [docs] Fix typo sx !== xs (#26596) @onpaws
  • [docs] Multiple select demos moving when selecting values (#26539) @itsnorbertkalacska
  • [docs] Improve migration guide for @material-ui/styles (#26552) @mnajdova
  • [docs] Rating value is nullable in onChange (#26542) @sakura90
  • [example] Remove the dependency on @material-ui/styles (#26567) @garfunkelvila


  • [core] Ignore latest prettier run in git-blame @eps1lon
  • [core] Format @eps1lon
  • [test] Add bundle fixtures (#23166) @eps1lon
  • [website] Add MichaΕ‚ to the About Us page (#26557) @michaldudak

All contributors of this release in alphabetical order: @coder-freestyle, @eps1lon, @garfunkelvila, @itsnorbertkalacska, @likitarai1, @m4theushw, @michaldudak, @mnajdova, @onpaws, @sakura90, @sarahannnicholson, @siriwatknp, @vedadeepta, @vicasas


May 31, 2021

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

  • πŸ‘©β€πŸŽ€ We have completed the migration to emotion of all the components (@material-ui/core and @material-ui/lab) @siriwatknp, @mnajdova.
  • πŸ“¦ Save 10 kB gzipped by removing the dependency on @material-ui/styles (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
  • βš’οΈ Add many new codemods to automate the migration from v4 to v5 (#24867) @mbrookes.
  • And many more πŸ› bug fixes and πŸ“š improvements.


Breaking changes

  • [styles] Remove makeStyles from @material-ui/core (#26382) @mnajdova

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

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

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

   // In the root of your app
   function App(props) {
  -  return <Component />;
  +  return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
  • [styles] Remove withStyles from @material-ui/core (#26377) @mnajdova

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

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

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

   function App() {
  -  return <MyComponent />;
  +  return <ThemeProvider theme={defaultTheme}><MyComponent /></ThemeProvider>;
  • [styles] Merge options in experimentalStyled (#26396) @mnajdova

The options inside the experimentalStyled module are now merged under one object. In the coming weeks, we will rename ths module: styled() to signal that it's no longer experimental.

  -experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something' }, { skipSx: true })(...);
  +experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something', skipSx: true })(...);
  • [Tabs] Update min & max width and remove minWidth media query (#26458) @siriwatknp

Update the implementation to better match Material Design:


  • [ButtonBase] Fix role="button" attribute (#26271) @Gautam-Arora24
  • [Dialog] Fix support for custom breakpoints (#26331) @jeferson-sb
  • [Select] Open popup below button (#26200) @oliviertassinari
  • [TextField] Add variants support, e.g. custom sizes (#26468) @siriwatknp
  • [Tooltip] Improve handling of small vs. touch screens (#26097) @oliviertassinari


  • [codemod] Add multiple codemods to migrate components from v4 to v5 (#24867) @mbrookes
  • [codemod] Correct path and add target placeholder (#26414) @mbrookes


  • [icons] Use array children instead of React fragments (#26309) @eps1lon

Reduce a bit the size of the package.


We are progressively moving all modules that are relevant to styling custom design systems in this package. It's meant to be complementary with @material-ui/unstyled.

  • [system] Add Box to system (#26379) @mnajdova
  • [system] Add createStyled utility (#26485) @mnajdova


  • [styled-engine] Fix styled() util to respect options (#26339) @pasDamola


Breaking changes

  • [pickers] Remove allowKeyboardControl (#26451) @eps1lon
  • [ClockPicker] Rework keyboard implementation (#26400) @eps1lon

Remove the allowKeyboardControl prop from ClockPicker (and TimePicker and variants). Keyboard navigation now works by default.


  • [Button] Migrate LoadingButton to emotion (#26370) @siriwatknp
  • [ClockPicker] Selected option is the active descendant (#26411) @eps1lon
  • [DatePicker] Migrate CalendarPicker to emotion (#26390) @siriwatknp
  • [DatePicker] Migrate CalendarPickerSkeleton to emotion (#26335) @siriwatknp
  • [DateRangePicker] Migrate DateRangePickerDay to emotion (#26368) @siriwatknp
  • [DateRangePicker] Migrate internal components to emotion (#26326) @siriwatknp
  • [pickers] Migrate PickersCalendarHeader to emotion (#26354) @siriwatknp
  • [pickers] Migrate PickersModalDialog to emotion (#26355) @siriwatknp
  • [pickers] Migrate PickersPopper to emotion (#26391) @siriwatknp
  • [pickers] Migrate PickersTransition to emotion (#26353) @siriwatknp
  • [TimePicker] Migrate ClockPicker to emotion (#26389) @siriwatknp
  • [TreeView] Correctly select items in deeply nested trees (#26413) @Dru89


  • [docs] Add page for experimentalStyled() (#26361) @mnajdova
  • [docs] Add TypeScript convention (#26259) @siriwatknp
  • [docs] Add warning about git-blame-ignore-revs (#26487) @eps1lon
  • [docs] Clarify migration from Hidden (#26348) @m4theushw
  • [docs] Fix grammar for style library page (#26325) @mbrookes
  • [docs] Persist copied state indefinitely or until the user moves their cursor (#26336) @eps1lon
  • [docs] Typo in MultipleSelect (#26466) @wolfykey
  • [docs] Update system installation for v5 (#26481) @mnajdova
  • [template] Demo how to retreive form value (#26393) @akshitsuri


  • [core] Batch small changes (#26434) @oliviertassinari
  • [core] Fix peer dependencies declaration with yarn v2 (#26433) @oliviertassinari
  • [core] Remove @material-ui/styles dependencies from declaration files too (#26376) @mnajdova
  • [core] Revert Leverage CircleCI workspaces for jobs after checkout (#26444) @eps1lon
  • [test] Don't hoist constant elements (#26448) @eps1lon
  • [test] Fix prop-type warning (#26432) @oliviertassinari
  • [test] Flush scheduled effects before user event returns (#26447) @eps1lon
  • [test] Move ClockPicker tests to ClockPicker.test (#26407) @eps1lon
  • [test] setProps from createPickerRender should set props on the rendered element (#26405) @eps1lon
  • [utils] Convert useId to TypeScript (#26491) @eps1lon
  • [website] Add Material-UI X page (#25794) @DanailH
  • [website] Add open application section (#26501) @oliviertassinari
  • [website] Add Siriwat to team page (#26406) @siriwatknp

All contributors of this release in alphabetical order: @akshitsuri, @DanailH, @Dru89, @eps1lon, @Gautam-Arora24, @jeferson-sb, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @pasDamola, @siriwatknp, @wolfykey

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