时间戳

首页 > 解决方案 > Material-UI 中的 DefaultTheme 导致“扩充中的模块名称无效”错误

javascript - Material-UI 中的 DefaultTheme 导致“扩充中的模块名称无效”错误

问题描述

如迁移文档（v4 到 v5）中所述，我已将其添加到我的主题中：

import { createTheme, Theme } from '@mui/material/styles'
import { grey } from '@mui/material/colors'

declare module '@mui/styles/defaultTheme' { // <-- ts error
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

const { palette } = createTheme()
const { augmentColor } = palette

// Create a theme instance.
export const theme: Theme = createTheme({
  palette: {
    neutral: augmentColor({ color: { main: grey[400] } }),
  }
})

但我得到了 ts 错误Invalid module name in augmentation, module '@mui/styles/defaultTheme' cannot be found.ts(2664)

我究竟做错了什么？

标签： javascriptreactjstypescriptmaterial-ui

解决方案

我不知道为什么，但是导入模块以解决它的副作用：

import { Theme } from "@mui/material/styles";
import "@mui/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 {}
}

推荐阅读