# Migración de v3 a v4

¡Sí, v4 ha sido lanzada!

¿Buscando la documentación de v3? [Encuéntralos aquí](https://material-ui.com/versions/). > Este documento es un trabajo en curso. ¿Ha actualizado su sitio y se ha topado con algo que no está cubierto aquí? [Añade tus cambios en GitHub](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/guides/migration-v3/migration-v3.md). ## Introducción Esta es una referencia para actualizar su sitio de Material-UI v3 a v4. Aunque hay mucho cubierto aquí, probablemente no tendrá que hacer todo por su sitio. Haremos todo lo posible para mantener las cosas fáciles de seguir, y tan secuencial como sea posible para que usted pueda rápidamente ponerse rocando en la v4! ## Por qué debería migrar Esta página de documentación cubre *cómo* migrar de v3 a v4. La *razón * está cubierta en la publicación del blog [de lanzamiento en Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701). ## Actualizando tus dependencias Lo primero que necesitará hacer es actualizar sus dependencias. ### Actualizar versión de Material-UI Necesitas actualizar tu `package.json` para usar la última versión de Material-UI. ```json "dependencies": { "@material-ui/core": "^4.0.0" } ``` Or run ```sh npm install @material-ui/core o yarn add @material-ui/core ``` ### Actualizar versión de React La versión mínima requerida de React se incrementó de `react@^16.3.0` a `react@^16.8.0`. Esto nos permite confiar en [Hooks](https://reactjs.org/docs/hooks-intro.html) (ya no usamos la API de clase). ### Actualizar la versión de los estilos de Material-UI Si previamente estaba usando `@material-ui/styles` con v3, necesita actualizar su `package.json` para usar la última versión de los estilos Material-UI. ```json "dependencies": { "@material-ui/styles": "^4.0.0" } ``` Or run ```sh npm install @material-ui/styles o yarn add @material-ui/styles ``` ## Handling breaking changes ### Core - Every component forward their ref. This is implemented by using `React.forwardRef()`. This affects the internal component tree and display name and therefore might break shallow or snapshot tests. `innerRef` will no longer return a ref to the instance (or nothing if the inner component is a function component) but a ref to its root component. The corresponding API docs list the root component. ### Estilos - ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. The StylesProvider component replaces the JssProvider one. (Removing `react-jss` from your `package.json` can help). - Remove the first option argument of `withTheme()`. (The first argument was a placeholder for a potential future option that never arose.) It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com). ```diff -const DeepChild = withTheme()(DeepChildRaw); +const DeepChild = withTheme(DeepChildRaw); ``` - Rename `convertHexToRGB` to `hexToRgb`. ```diff -import { convertHexToRgb } from '@material-ui/core/styles/colorManipulator'; +import { hexToRgb } from '@material-ui/core/styles'; ``` - Scope the [keyframes API](https://cssinjs.org/jss-syntax/#keyframes-animation). You should apply the following changes in your codebase. It helps isolating the animation logic: ```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, }, }, ``` ### Theme - The `theme.palette.augmentColor()` method no longer performs a side effect on its input color. To use it correctly, you have to use the returned value. ```diff -const background = { main: color }; -theme.palette.augmentColor(background); +const background = theme.palette.augmentColor({ main: color }); console.log({ background }); ``` - You can safely remove the next variant from the theme creation: ```diff typography: { - useNextVariants: true, }, ``` - `theme.spacing.unit` usage is deprecated, you can use the new API: ```diff label: { [theme.breakpoints.up('sm')]: { - paddingTop: theme.spacing.unit * 12, + paddingTop: theme.spacing(12), }, } ``` *Tip: you can provide more than 1 argument: `theme.spacing(1, 2) // = '8px 16px'`*. You can use [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api) on your project to make this smoother. ### Layout - [Grid] In order to support arbitrary spacing values and to remove the need to mentally count by 8, we are changing the spacing API: ```diff /** * Defines the space between the type `item` component. * It can only be used on a type `container` component. */ - spacing: PropTypes.oneOf([0, 8, 16, 24, 32, 40]), + spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]), ``` Going forward, you can use the theme to implement [a custom Grid spacing transformation function](https://material-ui.com/system/spacing/#transformation). - [Container] Moved from `@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 Normalized `value` prop type for input components to use `unknown`. This affects `InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`. ```diff function MySelect({ children }) { - const handleChange = (event: any, value: string) => { + const handleChange = (event: any, value: unknown) => { // handle value }; return } ``` Este cambio se explica con más detalle en la [guía TypeScript](/guides/typescript/#handling-value-and-event-handlers) ### Button - [Button] Quitar las variantes de botón obsoletas (plano, elevado y fab): ```diff -