Add property to background prop in createMuiTheme in Material-UI using Typescript

Question

I'm trying to add a new property inside the createMuiTheme. But Typescript don't let me do.

I followed the instructions here: https://next.material-ui.com/guides/typescript/#customization-of-theme

I created a.ts file where I put this:

import * as React from 'react';

declare module '@material-ui/core/styles' {
  interface TypeBackground {
    darker: string;
  }
}

And, this where I create the Material-UI theme:

import {createMuiTheme} from "@material-ui/core";

export const darkTheme = createMuiTheme({
    palette: {
        background: {
            darker: '#fafa',
        },
        mode: 'dark'
    },
})

But I am getting this error:

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

Even so I tried the example from the material-ui team, it's work, but not my code. I can't find why. I should probably missing something.

I am using the interface "TypeBackground" because it is named like that in the createPalette.d.ts file from material-ui.

export interface TypeBackground {
  default: string;
  paper: string;
}

So I tried to do the same. I thought it was the same as adding props to palette property.

Thanks!

Answer 1

You need export the interface in the module declaration.

  export interface TypeBackground {
    darker: string;
  }

Answer 2

Ok, so I just found a solution. But I don't really understand why is it working.

I modified the "declare module" line:

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

I just added "createPalette" after styles. Now it's working, I just can't figure out why ^^!