在 typescript 中扩展 Mui Typescript 断点

Question

尝试使用自定义名称作为断点值时出现打字稿错误：

Type '{ mobile: number; tablet: number; desktop: number;}' is not assignable to type '{ xs: number; sm: number; md: number; lg: number; xl: number; }'.
  Object literal may only specify known properties, and 'mobile' does not exist in type '{ xs: number; sm: number; md: number; lg: number; xl: number; }'.

这是我的ThemProvider

import { ThemeProvider, createTheme } from "@mui/material/styles";

<ThemeProvider
  theme={createTheme({
    breakpoints: {
      values: {
        mobile: 480,
        tablet: 750,
        desktop: 1076,
      },
    },
  })}

我尝试添加声明文件，但随后在导入时出现错误： 模块“@mui/material/styles”没有导出成员“ThemeProvider”。 模块“@mui/material/styles”没有导出成员“createTheme”。

declare module "@mui/material/styles" {
  interface BreakpointOverrides {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true; // adds the `mobile` breakpoint
    tablet: true;
    laptop: true;
    desktop: true;
  }
}

Answer 1

这已经有一分钟了，但也在解决这个问题。看起来this答案有关键。不过，我们必须调整新的 mui 文件夹结构。

import { BreakpointOverrides } from '@mui/system/createTheme/createBreakpoints';

declare module '@mui/system/createTheme/createBreakpoints' {
  interface BreakpointOverrides {
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true;
    tablet: true;
    laptop: true;
    desktop: true;
    desktopApp: true;
    largeDesktop: true;
  }
}

declare module '@mui/material/styles/createTheme' {
  interface ThemeOptions {
    breakpoint?: BreakpointOverrides;
  }
}

// ...

const theme = {
  // ...
  breakpoints: {
    values: {
      desktopApp: 1024,
      mobile: 0,
      tablet: 481,
      laptop: 768,
      desktop: 1024,
      largeDesktop: 1200,
    },
  },
  // ...
};

Answer 2

将

declare module "@mui/material/styles"

包裹在

declare global

内

declare global {
  declare module '@mui/material/styles' {
    interface BreakpointOverrides {
      xs: false; // removes the `xs` breakpoint
      sm: false;
      md: false;
      lg: false;
      xl: false;
      mobile: true; // adds the `mobile` breakpoint
      tablet: true;
      laptop: true;
      desktop: true;
    }
  }
}