Upgrade to v9

This guide explains how to upgrade from Material UI v7 to v9.

Start using the alpha release

In the package.json file, change the package version from latest to next.

-"@mui/material": "latest",
+"@mui/material": "next",

Using next ensures your project always uses the latest v9 pre-releases. Alternatively, you can also target and fix it to a specific version, for example, 9.0.0-alpha.0.

Breaking changes

Since v9 is a new major release, it contains some changes that affect the public API. The steps you need to take to migrate from Material UI v7 to v9 are described below.

TablePagination numbers are formatted by default

Pagination numbers in TablePagination are now formatted using Intl.NumberFormat according to the locale. For example, 103177 is displayed as 103,177 in en-US or 103.177 in de-DE.

To opt out of number formatting, provide a custom labelDisplayedRows function:

<TablePagination
  labelDisplayedRows={({ from, to, count }) =>
    `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`
  }
/>

Or when using a locale:

import { enUS } from '@mui/material/locale';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  enUS,
  {
    components: {
      MuiTablePagination: {
        defaultProps: {
          labelDisplayedRows: ({ from, to, count }) =>
            `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
        },
      },
    },
  },
);