As a newcomer to react and typescript, I am exploring ways to expand the color palette within a global theme.
Within my themeContainer.tsx file,
import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
declare module '@material-ui/core/styles/createPalette' {
// allow configuration using `createMuiTheme`
interface Palette {
accent: PaletteColor
}
interface PaletteOptions {
accent: PaletteColorOptions,
tertiary: PaletteColorOptions
}
};
const ThemeContainer: React.FunctionComponent<Props> = (props, themeOptions: ThemeOptions) => {
const { children } = props;
const theme = useMemo(() => {
const nextTheme = createMuiTheme({
...themeOptions,
palette: {
accent: {
main: '#ff0000'
},
}
});
return nextTheme;
});
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};
export default ThemeContainer;
However, upon implementing this on my component, an error occurred prompting "No overload on this call."
https://i.stack.imgur.com/WkwlH.png
Your assistance is greatly appreciated.