Material UI v4 Theme augmentation with TypeScript

Question

I'm trying to create my own palette option in the theme section and I'm honestly lost at how exactly I do the augmentation part with TypeScript.

I've created a file called "material-ui.d.ts" and so far inside I only have:

import { PaletteOptions } from "@material-ui/core/styles/createPalette";

declare module "@material-ui/core/styles/createPalette" {}

At the Theme level, I'm trying to create a new element called kzprimary, which has its own color properties and I can use it 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 just don't know what I need to edit inside of material-ui.d.ts to make this work.

Can someone please guide me? kaizenTest is what I pass to my Themeprovider on the app level and it applies the themes. Also note that I am working with v4 of Material UI as delegated by my company. So I hope Augmentation is possible on v4.

Here 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;

Answer 1

I have figured it out.

You simply have to add the interfaces to your file and then augmentation works.

import { createTheme, ThemeProvider, colors } from "@material-ui/core";

const basic = createTheme({});

const alternative = createTheme({
    palette: {
        primary: {
            main: colors.purple[500],
        },
        kzprimary: {
            main: colors.orange[500]
        },
        secondary: {
            main: colors.pink[500],
        },

    },
});

const kaizenTest = createTheme({
    palette: {
        primary: {
            main: "#1A2846",
        },
        kzprimary: {
            main: colors.orange[500],
        },
        background: {
            default: '#DDDDDD'
        }
    },
});

declare module '@material-ui/core/styles/createPalette' {
    interface Palette {
        kzprimary?: Palette['primary'],
    }
    interface PaletteOptions {
        kzprimary?: PaletteOptions['primary'],
    }
}

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 };