Material UI v5 - 使用自定义主题时，“DefaultTheme”类型上不存在属性“spacing”

Question

我使用的是 Material ui 版本 5，我有一个自定义主题，我已将其包装在所有组件中。

在我的一个组件中，我试图根据我的主题给纸张一些填充，但是我收到以下错误。

“DefaultTheme”类型上不存在属性“spacing”

       <AppProvider>
            <Theme>
                <Layout>
                    <ProtectedRoute>
                        <Component {...pageProps} />
                    </ProtectedRoute>
                </Layout>
            </Theme>
        </AppProvider>

活动.tsx

const useStyles = makeStyles((theme) => ({
    paper: {
        padding: theme.spacing(3),
    },
}));

export default function Campaign(props: ICampaginProps): ReactElement | null {
    const classes = useStyles();

主题.tsx

const DEFAULT_THEME = createTheme({
    typography: {
        fontSize: 12,
    },
    palette: {
        mode: "light",
        primary: {
            main: "#212121",
        },
        secondary: {
            main: "#fafafa",
        },
    },
});

Answer 1

您是否尝试过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 {}
}