The topic is a little bit tricky. I had to create a custom theme for MUI + TypeScript project. And I found this a little bit hard to achieve with TS.

So, just an example of a custom theme.

import { Backgrounds, createTheme, ThemeOptions } from '@mui/material/styles';
import React from 'react';
// https://bareynol.github.io/mui-theme-creator/

declare module '@mui/material/styles' {
    interface Backgrounds {
        bg1: string;
        bg2: string;
        bg3: string;
        bg4: string;
        bg5: string;
    }

    interface CustomTextColor {
        text1: string;
        text2: string;
        text3: string;
        text4: string;
    }

    interface Palette {
        backgrounds: Backgrounds;
        customText: CustomTextColor;
    }

    // allow configuration using `createTheme`
    interface PaletteOptions {
        backgrounds: Backgrounds;
        customText: CustomTextColor;
    }

    interface TypographyVariants {
        p20: React.CSSProperties;
        p18: React.CSSProperties;
        p16: React.CSSProperties;
        p14: React.CSSProperties;
        p12: React.CSSProperties;
        p10: React.CSSProperties;
        p22: React.CSSProperties;
    }

    // allow configuration using `createTheme`
    interface TypographyVariantsOptions {
        p20: React.CSSProperties;
        p18: React.CSSProperties;
        p16: React.CSSProperties;
        p14: React.CSSProperties;
        p12: React.CSSProperties;
        p10: React.CSSProperties;
        p22: React.CSSProperties;
    }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
    interface TypographyPropsVariantOverrides {
        p20: true;
        p18: true;
        p16: true;
        p14: true;
        p12: true;
        p10: true;
        p22: true;
    }
}

export const lightThemeOptions: ThemeOptions = {
    palette: {
        mode: 'light',
        primary: {
            main: '#2bd6b5',
            light: '#AAE8DE',
            dark: '#1E957E',
        },
        secondary: {
            main: '#FFB885',
        },
        background: {
            default: '#FFF',
        },
        text: {
            primary: '#000',
            secondary: '#727687',
            // hint: '#B0B7C3',
        },
        error: {
            main: '#FD6E4E',
        },
        warning: {
            main: '#FFAB00',
        },
        info: {
            main: '#FFF',
        },
        success: {
            main: '#1E957E',
        },
        divider: '#e5e5e8',
        backgrounds: {
            bg1: '#F3F3F4',
            bg2: '#1D1E25',
            bg3: '#26272C',
            bg4: '#3B3C46',
            bg5: '#FFF',
        },
        customText: {
            text1: '#43485C',
            text2: '#727687',
            text3: '#B0B7C3',
            text4: '#43485C',
        },
    },
    typography: {
        fontFamily: ['Raleway', 'Work Sans'].join(','),
        p20: {
            fontSize: 20,
            lineHeight: 30,
            fontFamily: 'Raleway',
        },
        p18: {
            fontSize: 18,
            lineHeight: '27px',
            fontFamily: 'Raleway',
        },
        p16: {
            fontSize: 16,
            lineHeight: 24,
            fontFamily: 'Work Sans',
        },
        p14: {
            fontSize: 14,
            lineHeight: '21px',
            fontFamily: 'Work Sans',
        },
        p12: {
            fontSize: 12,
            lineHeight: '17px',
            fontFamily: 'Work Sans',
        },
        p10: {
            fontSize: 10,
            lineHeight: '15px',
            fontFamily: 'Work Sans',
        },
        p22: {
            fontSize: '22px',
            lineHeight: '33px',
            fontFamily: 'Raleway',
        },
    },
    breakpoints: {
        values: {
            xs: 0,
            sm: 768,
            md: 900,
            lg: 1200,
            xl: 1536,
        },
    },
    components: {
        MuiButton: {
            defaultProps: {
                disableElevation: true,
            },
            styleOverrides: {
                root: {
                    textTransform: 'unset',
                    fontWeight: '600',
                    fontFamily: 'Raleway',
                    color: '#fff',
                },
            },
        },
    },
};
const defaultLight = createTheme();
export const lightTheme = createTheme({ ...defaultLight, ...lightThemeOptions });

React #MUI #Material #Theme #TS