I am looking to create a repository with two directories, each using MUI and TypeScript. Both directories will have their own theme defined in one ThemeProvider per root. In the main index.tsx file in the root directory, I want to specify which component to render. The setup is as follows:
// Directory 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>
)
// Directory 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>
)
// Main index.tsx
render(true ? <A /> : <B />, document.body)
The issue arises when customizing the themes, as the module augmentation for a affects the typings for the theme of
b</code. Is there a way to instruct TypeScript to apply the augmentation from <code>A/index.tsxA directory and vice versa for B?