# Migrando da v3 para v4

Sim, v4 foi lançada!

Procurando pelos documentos da v3? [Encontre-os aqui](https://material-ui.com/versions/). > Este documento está em constante evolução. Você atualizou seu site e encontrou algo que não é abordado aqui? [Adicione suas alterações no GitHub](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/guides/migration-v3/migration-v3.md). ## Introdução Esta é uma referência para atualizar seu site de Material-UI v3 para v4. Embora haja muita coisa coberta por aqui, você provavelmente não precisará fazer tudo no seu site. Faremos o nosso melhor para manter as coisas fáceis de seguir e tão sequenciais quanto possível, para que você possa rapidamente agitar na v4! ## Por que você deve migrar Esta página de documentação cobre o *como* migrar da v3 para a v4. O *porque* é abordado na [postagem no blog do Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701). ## 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. ```json "dependencies": { "@material-ui/core": "^4.0.0" } ``` Ou execute ```sh npm install @material-ui/core ou yarn add @material-ui/core ``` ### Atualize a versão do React A versão miníma necessária do React foi incrementada de `react@^16.3.0` para `react@^16.8.0`. Isso nos permite a utilizar [Hooks](https://pt-br.reactjs.org/docs/hooks-intro.html) (não usamos mais a API class). ### Atualize a versão do Material-UI Styles Se você estava usando anteriormente `@material-ui/styles` com a versão 3, precisa atualizar o `package.json` para usar a última versão de Material-UI Styles. ```json "dependencies": { "@material-ui/styles": "^4.0.0" } ``` Ou execute ```sh npm install @material-ui/styles ou yarn add @material-ui/styles ``` ## Tratamento de alterações recentes ### Núcleo - Cada componente encaminha seu ref. Isso é implementado usando `React.forwardRef()`. Isso afeta a árvore interna do componente e o nome de exibição, portanto, pode quebrar testes superficiais ou instantâneos. `innerRef` não retornará mais um ref à instância (ou nada se o componente interno for um componente de função), mas uma referência ao seu componente raiz. Os documentos da API correspondentes listam o componente raiz. ### Estilos - ⚠️ Material-UI depende do JSS v10. JSS v10 não é compatível com a v9. Certifique-se de que o JSS v9 não esteja instalado em seu ambiente. (Remover `react-jss` do seu `package.json` pode ajudar). O componente StylesProvider substitui o componente JssProvider. - Remova a primeira opção de argumento do `withTheme()`. (O primeiro argumento é um espaço reservado para uma opção futura potencial que nunca existiu.) Corresponde à [emotion API](https://emotion.sh/docs/introduction) e [styled-components API](https://www.styled-components.com). ```diff -const DeepChild = withTheme()(DeepChildRaw); +const DeepChild = withTheme(DeepChildRaw); ``` - Renomeie `convertHexToRGB` para `hexToRgb`. ```diff -import { convertHexToRgb } from '@material-ui/core/styles/colorManipulator'; +import { hexToRgb } from '@material-ui/core/styles'; ``` - Escopo da [keyframes API](https://cssinjs.org/jss-syntax/#keyframes-animation). Você deve aplicar as seguintes alterações na sua base de código. Ela ajuda a isolar a lógica da animação: ```diff rippleVisible: { opacity: 0.3, - animation: 'mui-ripple-enter 100ms cubic-bezier(0.4, 0, 0.2, 1)', + animation: '$mui-ripple-enter 100ms cubic-bezier(0.4, 0, 0.2, 1)', }, '@keyframes mui-ripple-enter': { '0%': { opacity: 0.1, }, '100%': { opacity: 0.3, }, }, ``` ### Tema - O método` theme.palette.augmentColor() `não produz mais um efeito colateral em sua cor de entrada. Para usá-lo corretamente, agora você precisa usar o valor retornado. ```diff -const background = { main: color }; -theme.palette.augmentColor(background); +const background = theme.palette.augmentColor({ main: color }); console.log({ background }); ``` - Você pode remover com segurança a próxima variante na criação do tema: ```diff typography: { - useNextVariants: true, }, ``` - `theme.spacing.unit` está com o uso obsoleto, você pode usar a nova API: ```diff label: { [theme.breakpoints.up('sm')]: { - paddingTop: theme.spacing.unit * 12, + paddingTop: theme.spacing(12), }, } ``` *Dica: você pode fornecer mais de 1 argumento: `theme.spacing(1, 2) // = '8px 16px'`*. Você pode usar o [utilitário de migração](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api) em seu projeto para tornar isso mais suave. ### Leiaute - [Grid] Para suportar valores de espaçamento arbitrários e para remover a necessidade de contar mentalmente por 8, estamos mudando a API de espaçamento: ```diff /** * Define o espaço entre o componente do tipo `item`. * Só pode ser usado em um componente do tipo `container`. */ - spacing: PropTypes.oneOf([0, 8, 16, 24, 32, 40]), + spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]), ``` Indo adiante, você pode usar o tema para implementar [uma função de transformação de espaçamento de grade customizada](https://material-ui.com/system/spacing/#transformation). - [Container] Movido de `@material-ui/lab` to `@material-ui/core`. ```diff -import Container from '@material-ui/lab/Container'; +import Container from '@material-ui/core/Container'; ``` ### TypeScript #### `value` type Tipo da propriedade `value` normalizado para os componentes de entrada utilizarem `unknown`. Isso afeta `InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, e `TextField`. ```diff function MySelect({ children }) { - const handleChange = (event: any, value: string) => { + const handleChange = (event: any, value: unknown) => { // valor manipulado }; return } ``` Esta alteração é explicada em mais detalhes no [guia TypeScript](/guides/typescript/#handling-value-and-event-handlers) ### Botão - [Button] Remova as variantes descontinuadas (flat, raised e fab): ```diff -