通过模块扩充输入多个 MUI 主题

Question

我想在一个存储库中设置两个目录（一个 package.json 和 tsconfig.json），它们都将使用 MUI 和 TypeScript。这些目录中的每一个都将使用自己的主题（因此每个根目录中有一个 ThemeProvider）。在根目录下的mainindex.tsx文件中，我想决定渲染哪个分支。所以我们有这样的设置：

// A/index.tsx
declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    xs: false
    sm: false
    md: false
    lg: false
    xl: false
    mobile: true
  }
}

const a = createTheme({
  breakpoints: {
    values: {
      mobile: 300,
    },
  },
})

const A = () => (
  <ThemeProvider theme={a}>
    <Box sx={{ width: ({ breakpoints }) => breakpoints.mobile }} />
  </ThemeProvider>
)

// B/index.tsx
declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    xs: false
    sm: false
    md: false
    lg: false
    xl: false
    desktop: true
  }
}

const b = createTheme({
  breakpoints: {
    values: {
      desktop: 1200,
    },
  },
})

const B = () => (
  <ThemeProvider theme={b}>
    <Box sx={{ width: ({ breakpoints }) => breakpoints.desktop }} />
  </ThemeProvider>
)

// index.tsx
render(true ? <A /> : <B />, document.body)

我的问题是，当我尝试自定义主题时，a 的模块扩充（如 MUI 文档中所述）也会设置 b 主题的类型（应该定义它自己的定制）。

这里的问题是：是否可以告诉 TypeScript 它应该只对 A 目录使用 A/index.tsx 中的扩充，而只对 b 目录使用 b 中的扩充20=]?

Answer 1

这是不可能的。要实现这样的设置，您必须使用多个 tsconfig.json，因此类型不能相互推断。

通过模块扩充输入多个 MUI 主题

Typing multiple MUI themes via module augmentation

typescript

material-ui