Material UI 主题模块增强不起作用

Question

我一直在阅读 Stackoverflow 上的 MUI 文档、博客和其他帖子，但尽管如此，我仍无法让我的 vscode intellisense/typescript 来检测我的更改。

它们是非常简单的更改，与许多其他示例显示的非常相似，但什么也没有。

需要一些帮助。

• 多用户文档
• 资源

// theme.ts
export const getDesignTokens = (mode: PaletteMode) => ({
  palette: {
    mode,
    ...(mode === "light"
      ? {
          // palette values for light mode
          primary: {
            light: "#FF7988",
            main: "#FE5366",
            dark: "#E04052",
          },
          text: {
            primary: "#212121",
            secondary: "#616161",
          },
          background: {
            default: "#ffffff",
          },
          border: {
            light: "#EFEFEF",
            main: "#D9D9D9",
            dark: "#979797",
          },
        }
      : {
          // future dark values
        }),
...

// theme.d.ts
declare module "@mui/material/styles" {
  // allow configuration using `createTheme`
  interface PaletteOptions {
    border?: {
      light: string;
      main: string;
      dark: string;
    };
  }
  interface Palette {
    border: {
      light: string;
      main: string;
      dark: string;
    };
  }
}

不显示新border属性

Answer 1

我必须在脚本顶部添加模块的导入路径，这才可以正常工作。不知道为什么我必须这样做，我在其他地方没有注意到它，但它似乎有效。

import "@mui/material";    <--

declare module "@mui/material/styles" {
  // allow configuration using `createTheme`
  interface PaletteOptions {
    border?: {
      light: string;
      main: string;
      dark: string;
    };
  }
  interface Palette {
    border: {
      light: string;
      main: string;
      dark: string;
    };
  }
}