I have successfully created a MUI theme for my project, and everything is functioning as expected. Now, I want to extract this theme as a separate library (e.g. @myproject/theme) so that I can easily share and redeploy it across multiple applications. This way, when I update the theme library, all connected apps will automatically inherit the changes.
While this approach has worked well in most cases, I am facing difficulties in propagating the overridden variants with MUI. For instance, I have specific variants set up for the Button component:
declare module '@mui/material/Button' {
interface ButtonPropsVariantOverrides {
toolbar: true;
}
}
export const myThemeOptions = {
components: {
MuiButton: {
variants: [
{
props: { variant: 'toolbar' },
style: { ... }
}
]
}
}
}
export myLightTheme = createTheme(myThemeOptions, 'light'));
In the original project, the above code functioned perfectly, and VSCode recognized the added toolbar variant. However, after moving the theme to a new project/library (e.g. @myproject/theme) and installing it with npm install -D @myproject/theme, the added variants are no longer being recognized:
https://i.sstatic.net/lY3Wy.png
https://i.sstatic.net/xUlrn.png
How can I properly re-export the definition and ensure that consumer apps automatically load and override the MUI definitions? What is the correct approach to achieve my goal?
Feel free to suggest a different question title if needed.