I am attempting to implement my own custom palette option in the theme section, but I am struggling with how to do the augmentation part using TypeScript.
So far, I have created a file named "material-ui.d.ts" and inside it, I only have:
import { PaletteOptions } from "@material-ui/core/styles/createPalette";
declare module "@material-ui/core/styles/createPalette" {}
On the Theme level, I want to introduce a new element called kzprimary, which will have its own color properties that I can use instead of the default primary and secondary colors provided by Material UI.
import { createTheme, ThemeProvider, colors } from "@material-ui/core";
const basic = createTheme({});
const alternative = createTheme({
palette: {
primary: {
main: colors.purple[500],
},
secondary: {
main: colors.pink[500],
},
},
});
const kaizenTest = createTheme({
palette: {
primary: {
main: colors.blue[500],
},
kzprimary: {
main: colors.pink[500],
},
},
});
const applyTheme = (label: string) => {
switch (label) {
default:
case "basic":
return basic;
case "alternative":
return alternative;
case "kaizen":
return kaizenTest;
}
};
export default applyTheme;
export { ThemeProvider, applyTheme };
I am unsure about what needs to be edited within material-ui.d.ts to make this functionality work.
Could someone please provide me with guidance? The kaizenTest is the theme I pass to my ThemeProvider at the app level, where it applies the themes. It's worth noting that I am working with version 4 of Material UI as mandated by my company, so I hope Augmentation is achievable in v4.
Below is my APP index.tsx file:
import KaizenRouter from "router";
import { BrowserRouter } from "react-router-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import comms from "components/comms/class";
import CommsContext, { useSelector } from "components/comms";
import { Provider } from "react-redux";
import { store } from "./store";
import { getSettings } from "./selectors";
import { applyTheme, ThemeProvider } from "themes";
import { SnackbarProvider } from "notistack";
const App = () => {
return (
<CommsContext.Provider value={comms}>
<Storage />
</CommsContext.Provider>
);
};
const Storage = () => {
return (
<Provider store={store}>
<Theme />
</Provider>
);
};
const Theme = () => {
const { theme } = useSelector(getSettings);
return (
<ThemeProvider theme={applyTheme("kaizenTest")}>
<SnackbarProvider
maxSnack={3}
preventDuplicate
anchorOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<BrowserRouter>
<CssBaseline />
{/* <StrictMode> */}
<KaizenRouter />
{/* </StrictMode> */}
</BrowserRouter>
</SnackbarProvider>
</ThemeProvider>
);
};
export default App;