使用 Material-UI 从 UI 库中导出自定义主题

Question

I am creating a custom UI library for work that uses Material-UI. The UI library has a custom theme where I added to the palette object with custom company colors. The theme lives in the UI library, and for elements that live there, I can use the custom colors in makeStyles, but when I try to use the exported theme in the main codebase, the custom colors throw errors in makeStyles.

I believe the issue is I'm not exporting the theme's custom module. I am unsure how to export and import this correctly into the main codebase. Currently, I am only exporting the theme file and importing it into the main codebase.

Main Codebase :

import { theme } from 'customUILibrary';
...
<MuiThemeProvider theme={theme}>
    ...
</MuiThemeProvider>

CustomUILibrary :

index.ts:

export { theme } from 'theme/theme';

theme/theme.ts

import {
    createTheme,
    responsiveFontSizes,
} from '@material-ui/core/styles';
import './extendPalette';

export const theme = responsiveFontSizes(createTheme({

    palette: {
        gradients: {
            primary: 'linear-gradient(270deg, #35C7E1 -10.76%, #1A92BD 121.8%)',
            secondary: 'linear-gradient(270deg, #194E94 0%, #317CA6 100%)',
        },
    },
 
}));

extendPalette.ts

    declare module '@material-ui/core/styles/createPalette' {

    export interface PaletteOptions {
        gradients: {
            primary: string
            secondary: string,
        },
    }
    export interface Palette {
        gradients: {
            primary: string
            secondary: string,
        },
    }

}

Answer 1

As suggested here , you can do something like this:

declare module '@mui/material/styles' {
    interface Theme {
        gradients: typeof customData.gradient,
    }
    interface ThemeOptions {
        gradients: typeof customData.gradient,
    }
}

I never tried to override Palette but i think you can do it in the same place.