MaterialUI 中的 DefaultTheme 无法识别属性“palette”，一旦材质 ui 从 v4 移至 v5，它就会停止工作

Question

我正在将应用程序从 Material UI v4 迁移到 v5，但遇到了一些问题。其中之一是属性“palette”一旦在 makeStyles 中使用，就不会被 Material UI 中的 DefaultTheme 识别。该组件在 v4 中工作正常，但是当我将大部分内容移至 v5 时，它现在显示一个错误，并且无法识别“调色板”属性。您能看一下并让我知道如何修复它吗？

这就是它在主组件中的调用方式： import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
styledButton: {
    '&': { color: theme.palette.cerulean },
    '&.Mui-selected': {
        backgroundColor: theme.palette.aliceBlue,
        color: theme.palette.cerulean,
    },
    '&:hover': {
        backgroundColor: 'rgba(227,245,255, 0.5) !important',
    },
},

}));

当我将鼠标悬停在“调色板”上方时，TS 会给出如下评论：“DefaultTheme”类型上不存在属性“调色板”。

主题在App中调用如下：

import { ThemeProvider } from '@mui/styles';

从 '@nevomo/utilities' 导入 { MainTheme }；

export const App: FC = () => (
<StyledEngineProvider injectFirst>
    <ThemeProvider theme={MainTheme}>
        <SCThemeProvider theme={MainTheme}>
            <CssBaseline />
            <Router>
                <AuthContextProvider>
                    <Notifications />
                    <RoutingManager />
                </AuthContextProvider>
            </Router>
        </SCThemeProvider>
    </ThemeProvider>
</StyledEngineProvider>

）；

主主题看起来像：

import { createTheme, Theme } from '@mui/material/styles';
import { paletteColors } from './main-theme-colors';

export const MainTheme: Theme = createTheme({
spacing: (factor: number) => `${factor * 1}rem`,
palette: {
    primary: {
        main: paletteColors.primary.main,
    },
    secondary: {
        main: paletteColors.secondary.main,
    },
    error: {
        main: paletteColors.error.main,
    },
    white: '#FFFFFF',
    lighterBlue: '#EFFBFF',
    lightBlue: '#DEF7FF',
    celeste: '#00A7E1',
    blue: '#0027d3',
    navy: '#083D77',
    greenSalad: '#4DA167',
    red: '#d32f2f',
    pink: '#FFE3E3',
    lightPink: '#ECD6E6',
    darkPink: '#700353',
    black: '#000000',
    orange: '#FD5C01',
    darkRed: '#AD160B',
    aliceBlue: '#E3F5FF',
    cerulean: '#007CBA',
},

});

多谢 ！

Answer 1

OP 解决了他们的问题，但我会将其从MUI 迁移文档中保留下来，以供未来面临同样问题的人使用：

[类型] 类型“DefaultTheme”上不存在属性“palette”、“spacing”

因为makeStyles现在是从核心包中@mui/styles不知道的包中导出的。Theme要解决此问题，您需要从核心增强（空DefaultTheme对象） 。@mui/stylesTheme

TypeScript 项目

将此片段放入您的主题文件中：

// it could be your App.tsx file or theme file that is included in your tsconfig.json
import { Theme } from '@mui/material/styles';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
  interface DefaultTheme extends Theme {}
}

JavaScript 项目

如果您的 IDE（例如 VSCode）能够从d.ts文件推断类型，请index.d.ts使用以下代码片段在 src 文件夹中创建：

// index.d.ts
declare module "@mui/private-theming" {
  import type { Theme } from "@mui/material/styles";

  interface DefaultTheme extends Theme {}
}