# Migration from v3 to v4

Yeah, v4 has been released!

Looking for the v3 docs? You can [find the latest version here](https://mui.com/versions/). :::info 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/material-ui/blob/HEAD/docs/data/material/migration/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://mui.com/blog/material-ui-v4-is-out/). ## 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" } ``` Or run ```bash 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://react.dev/reference/react/hooks) (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" } ``` Or run ```bash npm install @material-ui/styles or 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. ### Styles - ⚠️ Material UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. (Removing `react-jss` from your `package.json` can help). The StylesProvider component replaces the JssProvider one. - 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://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/material-ui/tree/master/packages/mui-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](/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](/material-ui/guides/typescript/#handling-value-and-event-handlers) ### Button - [Button] Remove the deprecated button variants (flat, raised and fab): ```diff -