In my unique project setup, I have a singular repository containing atoms, molecules, and organisms along with storybooks to develop a custom components library. This library is based on MUI framework with a customized theme applied, all built with TypeScript.
While using MUI has simplified the development of custom components, it has also led to time-consuming efforts in resolving various issues that arise during the build process.
About the Theme
Within the 'atoms' repository, I have included our custom theme JSON file which is utilized by other repositories ('molecules' and 'organisms') as well as exported as part of the atom's library for external projects. The base theme is derived from MUI but has been enhanced with branding changes and custom colors, causing some challenges. To address this, I have created a createPalette.d.ts file in the 'Theme/' folder to declare these additional colors:
import '@mui/material/styles';
declare module '@mui/material/styles' {
interface Palette {
myColor: Palette['primary'];
}
interface PaletteOptions {
myColor?: PaletteOptions['primary'];
}
}
// Updated Button's props to include the custom color
declare module '@mui/material/Button' {
interface ButtonPropsColorOverrides {
myColor: true;
}
}
This theme configuration is then applied in each repository's '.storybook/preview.js' file as shown below:
import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
import { ThemeProvider } from 'emotion-theming';
import theme from '../stories/Theme';
import { withThemes } from '@react-theming/storybook-addon';
const providerFn = ({ theme, children }) => {
// fix for compatibility between emotion and mui theming
const serialTheme = JSON.parse(JSON.stringify(theme));
const muiTheme = createTheme(serialTheme);
return (
<MUIThemeProvider theme={muiTheme}>
<ThemeProvider theme={muiTheme}>{children}</ThemeProvider>
</MUIThemeProvider>
);
};
const themingDecorator = withThemes(null, [theme], {
providerFn,
});
export const decorators = [themingDecorator];
Although everything appears to function properly, there is still an underlying issue. Every time I attempt to access the custom colors like theme.palette.myColor.main, I encounter the following error:
Property 'myColor' does not exist on type 'Palette'.ts(2339)
I have discovered that while copying the 'createPalette.d.ts' file to another repository resolves the autocomplete issue, it still results in an error during the build process:
stories/ComponentFolder/index.tsx: error TS2339: Property 'myColor' does not exist on type 'Palette'.
My Considerations
- The most apparent solution seems to be importing/extending 'createPalette.d.ts' in other repositories, yet implementing this approach raises concerns about potential building errors.
- I am uncertain if importing the theme into other projects will yield positive results, especially regarding the 'not existing on type 'Palette'' property error.
- Perhaps there is a better strategy for storing and applying the theme within the application. What would be the ideal method for handling such a scenario?
Additional Notes
To tackle the publishing issue, I export the Theme as part of the library. However, incorporating the theme into external applications poses similar challenges, affecting any React app attempting to utilize the library. I am currently importing it as follows:
import theme from '@mylibrary/atoms/lib/Theme'<ThemeProvider />. While the problem remains consistent, it now extends beyond internal repositories to impact any external applications relying on the library.
I earnestly hope for insights or shared experiences from individuals who have encountered similar obstacles in their development process!