How to use react-admin with material ui version 5

Question

How to use react-admin with Material UI version 5. Is it possible to make it independent from material ui 4?

Answer 1

You'll need to use the latest theme and the legacy theme. The legacy theme should be set on the Admin component and the latest theme should be set via the ThemeProvider.

MUI v5 and MUI v4.x aren't that different in terms of the basic default theme. Given some things have been moved around and one or two keys removed. You can create an object to be the global theme (containing the typography, palette, breakpoints, etc if you customize these values).

A key difference in v5.x and v4.x is how style overrides and default props for components are defined. You will need to create a function to loop over all themeV5.components and grab the values in defaultProps and styleOverrides and assign them under the themeV4.props and themeV4.overrides.

import { ThemeProvider } from '@mui/material/styles';
import { createTheme } from '@mui/material/styles';
import { createTheme as createThemeV4 } from '@material-ui/core/styles';

const theme = {
  sidebar: {...},
  palette: {...},
  typography: {...},
}

let latestTheme = createTheme({
  ...theme,
  components: {},
});

let legacyTheme = createThemeV4({
  ...theme,
  overrides: {},
  props: {},
});

<ThemeProvider theme={latestTheme}>
  <Admin
    title={APP_NAME}
    authProvider={authProvider}
    dataProvider={dataProvider}
    i18nProvider={i18nProvider}
    history={history}
    theme={legacyTheme}
  >
    {resources}
  </Admin>
</ThemeProvider>

Answer 2

Looks like the next major version (4) of React-Admin adds support for MUI v5

Answer 3

They released react-admin v4 that uses mui 5