Migrando da v4 para v5

Sim, v5 foi lançada!

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

Este documento está em constante evolução. If you have upgraded your site and run into something that's not covered here, please add your changes on GitHub.

Introdução

Esta é uma referência para atualizar seu site de Material-UI v4 para v5. While there's a lot covered here, you probably won't need to do everything. We'll do our best to keep things easy to follow, and as sequential as possible, so you can quickly get rocking on v5!

Por que você deve migrar

Esta página de documentação cobre o como migrar da v4 para a v5. O por que é abordado na postagem no blog do Medium.

Atualizando suas dependências

A primeira coisa que você precisa fazer é atualizar suas dependências.

Atualize a versão do Material-UI

Você precisa atualizar seu package.json para usar a versão mais recente do Material-UI e suas dependências de pares.

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

Ou execute

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

ou

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

Tratamento de alterações recentes

Suporte de navegadores e versões de node

Os indicativos de suporte do pacote padrão foram alterados. As versões exatas do suporte serão fixadas na consulta browserslist "> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11, maintained node versions".

The default bundle supports the following minimum versions:

• Node 12 (antes era 8)
• Chrome 84 (antes era 49)
• Edge 85 (antes 14)
• Firefox 78 (antes era 52)
• Safari 13 (macOS) e 12.2 (iOS) (antes era 10)
• para maiores detalhes (veja .browserslistrc (seção stable))

Não há mais o suporte para o IE 11. Se você precisar do suporte para o IE 11, confira nosso pacote legado.

Componentes de classe sem o encaminhamento de refs

O suporte para componentes de classe, sem o encaminhamento de refs, na propriedade component ou como um elemento children imediato foi removido. Se você estava usando unstable_createStrictModeTheme ou não recebeu quaisquer avisos relacionados a findDOMNode no React. StrictMode, então você não precisa fazer nada. Caso contrário, confira a seção "Advertência com refs" em nosso guia de composição para descobrir como migrar. Esta alteração afeta quase todos os componentes no qual você está usando a propriedade component ou passando diretamente um children para componentes que requerem children como elemento (ou seja, <MenuList><CustomMenuItem /></MenuList>)

Supported React version

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

Supported TypeScript version

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

Style library

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

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

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
      {/* Your component tree. import * as React from 'react';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const cache = createCache({
  key: 'css',
  prepend: true,
});

export default function CssModulesPriority() {
  return (
    <CacheProvider value={cache}>
      {/* Sua árvore de componentes. */}
    </CacheProvider>
  );
}

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

Agora você pode sobrescrever os estilos do Material-UI. import * as React from 'react';
import { StylesProvider } from '@material-ui/core';

export default function GlobalCssPriority() {
  return (
    <StylesProvider injectFirst>
      {/* Your component tree. import * as React from 'react';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const cache = createCache({
  key: 'css',
  prepend: true,
});

export default function CssModulesPriority() {
  return (
    <CacheProvider value={cache}>
      {/* Sua árvore de componentes. */}
    </StylesProvider>
  );
}

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

Tema

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

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

• The default background color is now #fff in light mode and #121212 in dark mode. This matches the Material Design guidelines.

• Breakpoints are now treated as values instead of ranges. The behavior of down(key) was changed to define a media query below the value defined by the corresponding breakpoint (exclusive), rather than the breakpoint above. between(start, end) was also updated to define a media query for the values between the actual values of start (inclusive) and end (exclusive). Ao usar o utilitário de pontos de quebra down(), você precisa atualizar a chave de ponto de quebra em um passo. Ao usar o between(start, end), o ponto de quebra de fim também deve ser atualizado em um passo.

  Here are some examples of the changes required:

  -theme.breakpoints.down('sm') // '@media (max-width:959.95px)' - [0, sm + 1) => [0, md)
  +theme.breakpoints.down('md') // '@media (max-width:959.95px)' - [0, md)
  

  -theme.breakpoints.between('sm', 'md') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, md + 1) => [0, lg)
  +theme.breakpoints.between('sm', 'lg') // '@media (min-width:600px) and (max-width:1279.95px)' - [0, lg)
  

  -theme.breakpoints.between('sm', 'xl') // '@media (min-width:600px)'
  +theme.breakpoints.up('sm') // '@media (min-width:600px)'
  

  You can use the theme-breakpoints codemod for automatic migration of theme.breakpoints.

  O mesmo deve ser feito ao usar o componente Hidden:

  -<Hidden smDown>{...}</Hidden> // '@media (min-width:600px)'
  +<Hidden mdDown>{...}</Hidden> // '@media (min-width:600px)'
  

• The theme.breakpoints.width utility was removed because it's redundant. Use theme.breakpoints.values to get the same values.

  -theme.breakpoints.width('md')
  +theme.breakpoints.values.md
  

• A assinatura do utilitário theme.palette.augmentColor foi alterada:

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

• The theme.typography.round helper was removed because it was no longer used. If you need it, use the function below:

  function round(value) {
    return Math.round(value * 1e5) / 1e5;
  }
  

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

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

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

  import { createTheme } from '@material-ui/core/styles';
  
  const theme = createTheme({
    breakpoints: {
      values: {
        xs: 0,
        sm: 600,
        md: 960,
        lg: 1280,
        xl: 1920,
      },
    },
  });
  

Utilitário para atualização

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

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

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

Supported changes

As seguintes alterações são aplicadas por este utilitário adaptador:

• A abstração com a função "gutters" não provou ser utilizada com frequência suficiente para ser valiosa.

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

• theme.spacing agora retorna valores únicos com a unidade px por padrão. Esta alteração melhora a integração com styled-components & emotion.

  Antes:

  theme.spacing(2) => 16
  

  Depois:

  theme.spacing(2) => '16px'
  

  You can use the theme-spacing codemod to remove any 'px' suffix from theme.spacing calls in a template string.

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

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

• A chave theme.palette.text.hint não era usada em componentes do Material-UI e foi removida. Se você depende dela, você pode adicioná-la de volta:

  import { createTheme } from '@material-ui/core/styles';
  
  -const theme = createTheme(),
  +const theme = createTheme({
  +  palette: { text: { hint: 'rgba(0, 0, 0, 0.38)' } },
  +});
  

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

1. props

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

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

2. sobrescrevendo

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

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

Estilos

• Renomeado fade para alpha para descrever melhor a sua funcionalidade. O nome anterior estava gerando confusão quando a cor de entrada já tinha um valor alfa. O utilitário sobrescreve o valor alfa da cor.

  - import { fade } from '@material-ui/core/styles';
  + import { alpha } from '@material-ui/core/styles';
  
  const classes = makeStyles(theme => ({
  -  backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
  +  backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
  }));
  

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

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

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

Sistema

• The following system functions (and properties) were renamed because they are considered deprecated CSS:

  1. gridGap to gap
  2. gridRowGap to rowGap
  3. gridColumnGap to columnGap

• Use spacing unit in gap, rowGap, and columnGap. If you were using a number previously, you need to mention the px to bypass the new transformation with theme.spacing.

  <Box
  - gap={2}
  + gap="2px"
  >
  

• Replace css prop with sx to avoid collision with styled-components & emotion css prop.

  -<Box css={{ color: 'primary.main' }} />
  +<Box sx={{ color: 'primary.main' }} />
  

  Note that the system grid function wasn't documented in v4.

Componentes do core

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

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

Uma barra de aplicativos proeminente.

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

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

  <AppBar enableColorOnDark />
  

Alerta

• Mova o componente do lab para o core. O componente agora é estável.

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

Você pode usar o codemod moved-lab-modules para realizar uma migração automática.

Autocompletar

• Mova o componente do lab para o core. O componente agora é estável.

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

  Você pode usar o codemod moved-lab-modules para realizar uma migração automática.

• Remova a propriedade debug. Existem algumas alternativas mais simples: open={true}, Chrome devtools "Emulate focused", ou React devtools prop setter.

• renderOption deve agora retornar uma estrutura completa do DOM da opção. Isso torna as customizações mais fáceis. Você pode aplicar a alteração com:

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

• Rename closeIcon prop to clearIcon to avoid confusion.

  -<Autocomplete closeIcon={defaultClearIcon} />
  +<Autocomplete clearIcon={defaultClearIcon} />
  

  You can use the autocomplete-rename-closeicon codemod for automatic migration.

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

  1. create-option to createOption
  2. select-option to selectOption
  3. remove-option to removeOption

• Change the CSS rules that use [data-focus="true"] to use .Mui-focused. The data-focus attribute is not set on the focused option anymore, instead, global class names are used.

  -'.MuiAutocomplete-option[data-focus="true"]': {
  +'.MuiAutocomplete-option.Mui-focused': {
  

• Rename getOptionSelected to isOptionEqualToValue to better describe its purpose.

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

Avatar

• Renomeie circle para circular por uma questão de consistência:

  -<Avatar variant="circle">
  -<Avatar classes={{ circle: 'className' }}>
  +<Avatar variant="circular">
  +<Avatar classes={{ circular: 'className' }}>
  

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

  -<Avatar variant="circle">
  +<Avatar>
  

  You can use the avatar-circle-circular codemod for automatic migration.

• Mova o componente AvatarGroup do lab para o core.

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

  Você pode usar o codemod moved-lab-modules para realizar uma migração automática.

Badge

• Renomeie circle para circular e rectangle para rectangular por uma questão de consistência.

  -<Badge overlap="circle">
  -<Badge overlap="rectangle">
  +<Badge overlap="circular">
  +<Badge overlap="rectangular">
  <Badge classes={{
  - anchorOriginTopRightRectangle: 'className',
  - anchorOriginBottomRightRectangle: 'className',
  - anchorOriginTopLeftRectangle: 'className',
  - anchorOriginBottomLeftRectangle: 'className',
  - anchorOriginTopRightCircle: 'className',
  - anchorOriginBottomRightCircle: 'className',
  - anchorOriginTopLeftCircle: 'className',
  + anchorOriginTopRightRectangular: 'className',
  + anchorOriginBottomRightRectangular: 'className',
  + anchorOriginTopLeftRectangular: 'className',
  + anchorOriginBottomLeftRectangular: 'className',
  + anchorOriginTopRightCircular: 'className',
  + anchorOriginBottomRightCircular: 'className',
  + anchorOriginTopLeftCircular: 'className',
  }}>
  

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

BottomNavigation

• TypeScript: The event in onChange is no longer typed as a React. ChangeEvent but React. SyntheticEvent.

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

Box

• O valor de transformação da propriedade de sistema borderRadius foi alterado. Se ele receber um número, ele multiplica esse valor pelo valor de theme.shape.borderRadius. Use a string to provide an explicit px value.

  -<Box borderRadius="borderRadius">
  +<Box borderRadius={1}>
  

  -<Box borderRadius={16}>
  +<Box borderRadius="16px">
  

  You can use the box-borderradius-values codemod for automatic migration.

• The Box system props have an optional alternative API in v5, using the sx prop. You can read this section for the "why" behind this new API.

  -<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
  +<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>
  

  If you prefer the new syntax, you can use the box-sx-prop codemod for automatic migration.

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

  1. gridGap to gap
  2. gridColumnGap to columnGap
  3. gridRowGap to rowGap

  -<Box gridGap={1}>
  -<Box gridColumnGap={2}>
  -<Box gridRowGap={3}>
  +<Box gap={1}>
  +<Box columnGap={2}>
  +<Box rowGap={3}>
  

  (Note that the system grid function wasn't documented in v4.)

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

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

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

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

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

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

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

Button

• A propriedade color do botão agora é "primary" por padrão, e "default" foi removido. This makes the button closer to the Material Design guidelines and simplifies the API.

  -<Button color="primary">
  -<Button color="default">
  +<Button>
  +<Button>
  

  You can use the button-color-prop codemod for automatic migration.

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

  <button class="MuiButton-root">
  - <span class="MuiButton-label">
      children
  - </span>
  </button>
  

Chip

• Renomeie a variante default para filled por uma questão de consistência.

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

  -<Chip variant="default">
  +<Chip>
  

  You can use the chip-variant-prop codemod for automatic migration.

Caixa de seleção

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

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

Conjunto de progressos

• The static variant has been renamed to determinate, and the previous appearance of determinate has been replaced by that of static. Era uma exceção para Material Design, e foi removida da especificação.

  <CircularProgress variant="static" classes={{ static: 'className' }} />
  +<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
  

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

NB: Se você já tinha customizado como "determinate", suas customizações provavelmente não são mais válidas. Por favor, remova-as.

Collapse

• A propriedade collapsedHeight foi renomeada para collapsedSize para dar suporte para a direção horizontal.

  -<Collapse collapsedHeight={40}>
  +<Collapse collapsedSize={40}>
  

• A chave classes.container foi alterada para corresponder à convenção dos outros componentes.

  -<Collapse classes={{ container: 'collapse' }}>
  +<Collapse classes={{ root: 'collapse' }}>
  

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

CssBaseline

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

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

• The body font size has changed from theme.typography.body2 (0.875rem) to theme.typography.body1 (1rem). To return to the previous size, you can override it in the theme:

  const theme = createTheme({
    typography: {
      body1: {
        fontSize: '0.875rem',
      },
    },
  });
  

  (Note that this will also affect use of the Typography component with the default body1 variant).

Dialog

• As propriedades de transição onE* foram removidas. Em vez disso, use TransitionProps.

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

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

• Remove the disableBackdropClick prop because it is redundant. Em vez disso, ignore eventos de close em onClose quando reason === 'backdropClick'.

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

• Remove the withMobileDialog higher-order component. A hook API permite uma solução mais simples e flexível:

  -import withMobileDialog from '@material-ui/core/withMobileDialog';
  +import { useTheme, useMediaQuery } from '@material-ui/core';
  
  function ResponsiveDialog(props) {
  - const { fullScreen } = props;
  + const theme = useTheme();
  + const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
    const [open, setOpen] = React.useState(false);
  
  // ...
  
  -export default withMobileDialog()(ResponsiveDialog);
  +export default ResponsiveDialog;
  

• Flatten DialogTitle DOM structure, remove disableTypography prop

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

Divider

• Use cor de borda em vez de cor de fundo. Ela impede a altura inconsistente em telas redimensionadas. If you have customized the color of the border, you will need to update the CSS property override:

  . MuiDivider-root {
  - background-color: #f00;
  + border-color: #f00;
  }
  

Painel de expansão

• Renomeie os componentes ExpansionPanel para Accordion para usar uma convenção de nome mais comum:

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

• TypeScript: The event in onChange is no longer typed as a React. ChangeEvent but React. SyntheticEvent.

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

• Renomeie focused para focusVisible por uma questão de consistência:

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

• Remova display: flex de AccordionDetails, é muito opinativo. A maioria dos desenvolvedores espera uma exibição em bloco.

• Remova a propriedade IconButtonProps de AccordionSummary. O componente renderiza um elemento <div> em vez de um IconButton. A propriedade não é mais necessária.

Fab

• Rename round to circular for consistency:

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

FormControl

• Altere a variante padrão de standard para outlined. Standard has been removed from the Material Design guidelines.

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

This codemod will automatically update your code.

Grid

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

  -<Grid justify="center">
  +<Grid justifyContent="center">
  

  You can use the component-rename-prop codemod for automatic migration.

• The props: alignItems alignContent and justifyContent and their classes and style overrides keys were removed: "align-items-xs-center", "align-items-xs-flex-start", "align-items-xs-flex-end", "align-items-xs-baseline", "align-content-xs-center", "align-content-xs-flex-start", "align-content-xs-flex-end", "align-content-xs-space-between", "align-content-xs-space-around", "justify-content-xs-center", "justify-content-xs-flex-end", "justify-content-xs-space-between", "justify-content-xs-space-around" and "justify-content-xs-space-evenly". These props are now considered part of the system, not on the Grid component itself. If you still wish to add overrides for them, you can use the theme.components.MuiGrid.variants options. For example

  const theme = createTheme({
    components: {
      MuiGrid: {
  -     styleOverrides: {
  -       "align-items-xs-flex-end": {
  -         marginTop: '20px',
  -       },
  -     },
  +     variants: {
  +       props: { alignItems: "flex-end" },
  +       style: {
  +         marginTop: '20px',
  +       },
  +     }],
      },
    },
  });
  

  You can use the grid-justify-justifycontent codemod for automatic migration.

GridList

• Renomeie os componentes GridList para ImageList para entrar em conformidade com o nome atual do componente no Material Design.

• Renomeie no GridList a propriedade spacing para gap para ter conformidade com o atributo CSS.

• Rename the GridList cellHeight prop to rowHeight.

• Adicione a propriedade variant para o GridList.

• Renomeie no GridListItemBar a propriedade actionPosition para position. (Observe também as alterações de nome de classe relacionadas.)

• Use CSS object-fit. For IE11 support either use a polyfill such as https://www.npmjs.com/package/object-fit-images, or continue to use the v4 component.

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

Hidden

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

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

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

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

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

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

Icon

• The default value of fontSize was changed from default to medium for consistency. In the unlikely event that you were using the value default, the prop can be removed:

  -<Icon fontSize="default">icon-name</Icon>
  +<Icon>icon-name</Icon>
  

IconButton

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

  - <IconButton>
  + <IconButton size="large">
  

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

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

Menu

• As propriedades de transição onE* foram removidas. Em vez disso, use TransitionProps.

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

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

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

• Change the default value of anchorOrigin.vertical to follow the Material Design guidelines. The menu now displays below the anchor instead of on top of it. Você pode reproduzir o comportamento anterior com:

   <Menu
  +  anchorOrigin={{
  +    vertical: 'top',
  +    horizontal: 'left',
  +  }}
  

MenuItem

• The MenuItem component inherits the ButtonBase component instead of ListItem. The class names related to "MuiListItem-*" are removed and theming ListItem is no longer affecting MenuItem.

  -<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
  +<li className="MuiButtonBase-root MuiMenuItem-root">
  

• prop listItemClasses is removed, use classes instead.

  -<MenuItem listItemClasses={{...}}>
  +<MenuItem classes={{...}}>
  

  Read more about MenuItem CSS API

Modal

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

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

• Remove the onEscapeKeyDown prop because it is redundant. Em vez disso, use onClose com reason === "escapeKeyDown".

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

• Remova a propriedade onRendered. Dependendo da sua situação de uso, use um ref com callback no elemento filho ou um hook de efeito no componente filho.

NativeSelect

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

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

OutlinedInput

• Remove the labelWidth prop. The label prop now fulfills the same purpose, using CSS layout instead of JavaScript measurement to render the gap in the outlined.

  -<OutlinedInput labelWidth={20} />
  +<OutlinedInput label="First Name" />
  

Paper

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

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

Paginação

• Mova o componente do lab para o core. O componente agora é estável.

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

  Você pode usar o codemod moved-lab-modules para realizar uma migração automática.

• Rename round to circular for consistency:

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

Popover

• As propriedades de transição onE* foram removidas. Em vez disso, use TransitionProps.

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

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

• The getContentAnchorEl prop was removed to simplify the positioning logic.

Popper

• Atualize Popper.js da v1 para v2. Esta biblioteca de terceiros introduziu muitas mudanças.
  Você pode ler seu guia de migração ou o seguinte resumo:

  • Os prefixos CSS mudaram:

    popper: {
      zIndex: 1,
    - '&[x-placement*="bottom"] $arrow': {
    + '&[data-popper-placement*="bottom"] $arrow': {
    

  • Method names have changed:

    -popperRef.current.scheduleUpdate()
    +popperRef.current.update()
    

    -popperRef.current.update()
    +popperRef.current.forceUpdate()
    

  • A API dos modificadores mudou muito. Há demasiadas alterações para serem cobertas neste guia.

Portal

• Remova a propriedade onRendered. Dependendo da sua situação de uso, use um ref com callback no elemento filho ou um hook de efeito no componente filho.

Botões de opção

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

  -<Radio />
  +<Radio color="secondary />
  

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

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

Rating

• Mova o componente do lab para o core. O componente agora é estável.

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

  Você pode usar o codemod moved-lab-modules para realizar uma migração automática.

• Altere o ícone padrão de vazio para melhorar a acessibilidade. Se você tiver uma propriedade icon customizada e não a propriedade emptyIcon, você pode reproduzir o comportamento anterior com:

  <Rating
    icon={customIcon}
  + emptyIcon={null}
  />
  

• Renomeie visuallyhidden para visuallyHidden por uma questão de consistência:

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

RootRef

• Este componente foi removido. Você pode obter uma referência para o nó DOM subjacente dos nossos componentes através da propriedade ref. The component relied on ReactDOM.findDOMNode which isdeprecated in `React.

    -
  -  
  -
  +
  `

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

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

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