通过模块增强输入多个MUI主题

Question

我想在一个存储库中设置两个目录(一个package.json和tsconfig.json)，这两个目录都将使用MUI和TypeScript。每个目录都将使用自己的主题(因此每个根目录中都有一个ThemeProvider)。在根目录中的主要index.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中的增强?

Answer 1

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

Answer 2

您可以手动将所有模块扩展捕获到两个不同的。Ts文件并手动加载到客户端包中。