如何在材料 ui 版本 5 中使用 react-admin答案

【问题标题】：How to use react-admin with material ui version 5如何在材料 ui 版本 5 中使用 react-admin
【发布时间】：2021-10-02 11:32:31
【问题描述】：

如何在 Material UI 版本 5 中使用 react-admin。是否可以使其独立于 Material ui 4？

【问题讨论】：

下一个分支还在version 4。

标签： reactjs material-ui react-admin

【解决方案1】：

您需要使用最新主题和旧主题。旧主题应在 Admin 组件上设置，最新主题应通过 ThemeProvider 设置。

MUI v5 和 MUI v4.x 在基本默认主题方面并没有什么不同。考虑到一些东西已经被移动了，一两个键被移除了。您可以创建一个对象作为全局主题（如果您自定义这些值，则包含排版、调色板、断点等）。

v5.x 和 v4.x 的一个关键区别是样式覆盖和组件的默认道具是如何定义的。您需要创建一个函数来遍历所有 themeV5.components 并获取 defaultProps 和 styleOverrides 中的值并将它们分配到 themeV4.props 和 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>

【讨论】：

【解决方案2】：

看起来next major version (4) of React-Admin 添加了support for MUI v5

【讨论】：