# Migration from v3 to v4

Ja, v4 wurde veröffentlicht!

Looking for the v3 docs? [Find them here](https://material-ui.com/versions/). > This document is a work in progress. Have you upgraded your site and run into something that's not covered here? [Add your changes on GitHub](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/guides/migration-v3/migration-v3.md). ## Introduction This is a reference for upgrading your site from Material-UI v3 to v4. While there's a lot covered here, you probably won't need to do everything for your site. We'll do our best to keep things easy to follow, and as sequential as possible so you can quickly get rocking on v4! ## Why you should migrate This documentation page covers the *how* of migrating from v3 to v4. The *why* is covered in the [release blog post on Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701). ## Updating your dependencies The very first thing you will need to do is to update your dependencies. ### Update Material-UI version You need to update your `package.json` to use the latest version of Material-UI. ```json "dependencies": { "@material-ui/core": "^4.0.0" } ``` Oder führe aus ```sh npm install @material-ui/core or yarn add @material-ui/core ``` ### Update React version The minimum required version of React was increased from `react@^16.3.0` to `react@^16.8.0`. This allows us to rely on [Hooks](https://reactjs.org/docs/hooks-intro.html) (we no longer use the class API). ### Update Material-UI Styles version If you were previously using `@material-ui/styles` with v3 you need to update your `package.json` to use the latest version of Material-UI Styles. ```json "dependencies": { "@material-ui/styles": "^4.0.0" } ``` Oder führe aus ```sh npm install @material-ui/styles or yarn add @material-ui/styles ``` ## Handling breaking changes ### Grundlegendes - 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. ### Stile - ⚠️ 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). Sie sollten die folgenden Änderungen in Ihrer Codebase anwenden. 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 } ``` This change is explained in more detail in the [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers) ### Button - [Button] Remove the deprecated button variants (flat, raised and fab): ```diff -