github mui/material-ui v5.0.0-alpha.33
on GitHub

latest releases: v5.15.18, v6.0.0-alpha.7, v6.0.0-alpha.6...
pre-release3 years ago

May 9, 2021

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

  • 💥 Make progress with the breaking changes. We have done 81 of the 109 changes planned. We will release 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow our milestone for more details.
  • And many more 🐛 bug fixes and 📚 improvements.

@material-ui/core@5.0.0-alpha.33

Breaking changes

  • [core] Remove deprecated innerRef prop (#26028) @m4theushw

    withStyles

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

    import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
const MyComponent = withStyles({
  root: {
    backgroundColor: 'red',
  },
})(({ classes }) => <div className={classes.root} />);
function MyOtherComponent(props) {
  const ref = React.useRef();
- return <MyComponent innerRef={ref} />;
+ return <MyComponent ref={ref} />;
}

    withTheme

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

    import * as React from 'react';
import { withTheme  } from '@material-ui/core/styles';
const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);
function MyOtherComponent(props) {
  const ref = React.useRef();
- return <MyComponent innerRef={ref} />;
+ return <MyComponent ref={ref} />;
}
  • [theme] Rename `createMuiTheme` to `createTheme` (#25992) @m4theushw

    Developers only need one theme in their application. A prefix would suggest a second theme is needed. It's not the case. createMuiTheme will be removed in v6. 

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

-const theme = createMuiTheme({
+const theme = createTheme({
  • [theme] Remove MuiThemeProvider alias (#26171) @m4theushw

    The MuiThemeProvider is no longer exported. Use ThemeProvider instead. It was removed from the documentation during v4-beta, 2 years ago. 

    -import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
  • [Box] Remove the `clone` prop (#26031) @m4theushw

    Its behavior can be obtained using the sx prop. 

    -<Box sx={{ border: '1px dashed grey' }} clone>
-  <Button>Save</Button>
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>
  • [Box] Remove render prop (#26113) @m4theushw

    Its behavior can be obtained using the sx prop directly on the child if it's a Material-UI component. For non-Material-UI components use the sx prop in conjunction with the component prop: 

    -<Box sx={{ border: '1px dashed grey' }}>
-  {(props) => <Button {...props}>Save</Button>}
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>
    -<Box sx={{ border: '1px dashed grey' }}>
-  {(props) => <button {...props}>Save</button>}
-</Box>
+<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>
  • [Checkbox] Make color="primary" default (#26002) @vicasas

    This better matches the material design guidelines. 

    -<Checkbox />
+<Checkbox color="secondary />
  • [Select] Remove `labelWidth` prop (#26026) @m4theushw

    The label prop now fulfills the same purpose, using CSS layout instead of JavaScript measurement to render the gap in the outlined. The TextField already handles it by default. 

    -<Select variant="outlined" labelWidth={20} />
+<Select label="Gender" />
  • [core] Remove `styled` JSS utility from `@material-ui/core/styles` (#26101) @mnajdova

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

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

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

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

    For new components, you can instead use the experimentalStyled() helper powered by emotion/sc. 

    import { experimentalStyled as styled } from '@material-ui/core/styles';
  • [Hidden] Remove component (#26135) @m4theushw

    Removed in favor of using the sx prop or the useMediaQuery hook.

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

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

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

    -<Hidden implementation="js" xlUp><Paper /></Hidden>
+const hidden = useMediaQuery(theme => theme.breakpoints.up('xl'));
+return hidden ? null : <Paper />;
  • [withWidth] Remove API (#26136) @m4theushw

    Removed in favor of the useMediaQuery hook. You can reproduce the same functionality creating a custom hook as described here.

  • [Autocomplete] Rename values of the reason argument (#26172) @m4theushw

    Rename the values of the reason argument in onChange and onClose for consistency:

    1. create-option to createOption
    2. select-option to selectOption
    3. remove-option to removeOption
  • [core] Remove `withTheme` from `@material-ui/core` (#26051) @mnajdova

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

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

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

 function App(props) {
-  return <MyComponent />;
+  return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
 }
  • [core] Remove `createStyles` from `@material-ui/core` (#26018) @mnajdova
    • The createGenerateClassName module is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles. 
    -import { createGenerateClassName } from '@material-ui/core/styles';
+import { createGenerateClassName } from '@material-ui/styles';
    • The jssPreset objeect is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles. 
    -import { jssPreset } from '@material-ui/core/styles';
+import { jssPreset } from '@material-ui/styles';
    • The ServerStyleSheets component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles. 
    -import { ServerStyleSheets } from '@material-ui/core/styles';
+import { ServerStyleSheets } from '@material-ui/styles';

  • The StylesProvider component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles. 

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

  • The useThemeVariants hook is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles. 

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

Changes

@material-ui/lab@5.0.0-alpha.33

Breaking changes

  • [Timeline] Add support for position override on items (#25974) @simonecervini

    Rename the align prop to position to reduce confusion. 

    -<Timeline align="alternate">
+<Timeline position="alternate">
    -<Timeline align="left">
+<Timeline position="right">
    -<Timeline align="right">
+<Timeline position="left">
  • [pickers] Remove customization of deep components (#26118) @eps1lon

Changes

  • [DatePicker] Migrate YearPicker to emotion (#25928) @siriwatknp
  • [DateRangePicker] Fix not being opened on click (#26016) @eps1lon
  • [pickers] Fix ref types (#26121) @eps1lon
  • [pickers] Rely on native behavior for disabled/readOnly behavior (#26055) @eps1lon
  • [pickers] Remove unused components from mobile and desktop variants (#26066) @eps1lon
  • [pickers] Document readonly/disabled pickers (#26056) @eps1lon
  • [pickers] Remove unused components from static variants (#26052) @eps1lon
  • [pickers] Toggle mobile keyboard view in the same commit as the view changes (#26017) @eps1lon
  • [pickers] Remove redundant aria-hidden (#26014) @eps1lon
  • [pickers] Ensure input value is reset in the same commit as the value (#25972) @eps1lon
  • [internal][pickers] Pass desktop wrapper props explicitly (#26120) @eps1lon
  • [internal][pickers] Move useInterceptProps into module (#26090) @eps1lon
  • [internal][pickers] Explicit default toolbar components (#26075) @eps1lon
  • [internal][pickers] Move validation from config to module (#26074) @eps1lon
  • [internal][pickers] Minimal types for defaultizing in useInterceptProps (#26063) @eps1lon
  • [internal][pickers] Don't validate inputFormat in production (#26053) @eps1lon
  • [internal][pickers] Remove unused styles (#26023) @eps1lon
  • [internal][pickers] Remove `AllSharedPickerProps` and `AllSharedDateRangePickerProps` (#26005) @eps1lon

Docs

Core

All contributors of this release in alphabetical order: @anish-khanna, @anshuman9999, @arpitBhalla, @DanielBretzigheimer, @eps1lon, @hubertokf, @Jack-Works, @jamesaucode, @LiKang6688, @m4theushw, @mnajdova, @mousemke, @oliviertassinari, @simonecervini, @siriwatknp, @t49tran, @vicasas

Check out latest releases or
releases around mui/material-ui v5.0.0-alpha.33

Don't miss a new material-ui release

NewReleases is sending notifications on new releases.

Get notifications