reactjs 如何在Material UI版本5中使用react-admin

c86crjj0  于 2023-05-22  发布在  React
关注(0)|答案(3)|浏览(162)

如何在Material UI版本5中使用react-admin。有没有可能让它独立于材质ui 4?

w1jd8yoj

w1jd8yoj1#

您需要使用最新主题和旧主题。遗留主题应在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>
zxlwwiss

zxlwwiss3#

他们发布了使用mui 5的react-admin v4

相关问题