how can I extend material ui theme type and modify existing types in Typescript?

0

Issue

I know that we can extend the material ui theme type and add new property like this:

for example adding appDrawer would be like this:

declare module '@material-ui/core/styles/createMuiTheme' {
  interface Theme {
    appDrawer: {
      width: React.CSSProperties['width']
      breakpoint: Breakpoint
    }
  }
  // allow configuration using `createMuiTheme`
  interface ThemeOptions {
    appDrawer?: {
      width?: React.CSSProperties['width']
      breakpoint?: Breakpoint
    }
  }
}

But My question is How can I modify existing properties for example I want to change grey property of palette to be like this:

createMuiTheme({
  palette: {
    grey: {
      light: "#f7f7f7",
      main: "#e1e1e1",
      dark: "#c2c2c2"
    }
  })

But above code would give me this error:

Type '{ light: string; main: string; dark: string; }' is not assignable to type 'Partial<Color>'.
  Object literal may only specify known properties, and 'light' does not exist in type 'Partial<Color>'.

so I want to extend the grey color to accept these values { light: string; main: string; dark: string; }

Any help would be greatly appreciated

Solution

I’ve just used a workaround and put all my custom properties in side a custom key like this:

declare module "@material-ui/core/styles/createMuiTheme" {
  interface Theme {
    custom?: {
      palette?: {
        grey?: PaletteColorOptions;
      };
    };
    newProp?: whateverTypeItIs
  }
  // allow configuration using `createMuiTheme`
  interface ThemeOptions {
    custom?: {
      palette?: {
        grey?: PaletteColorOptions;
      };
    };
    newProp?: whateverTypeItIs
  }
}

Answered By – Taghi Khavari

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More