Material UI 主题模块扩充不起作用答案

【问题标题】：Material UI theme module augmentation not workingMaterial UI 主题模块扩充不起作用
【发布时间】：2022-11-22 16:31:12
【问题描述】：

我一直在阅读 MUI 文档、博客和 Stackoverflow 上的其他帖子，但尽管如此，我还是无法让我的 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 属性

【问题讨论】：

标签： javascript typescript next.js material-ui module-augmentation

【解决方案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;
    };
  }
}

【讨论】：