Material-ui: ThemeOptions TS typings appear to be incomplete

[Slessi]

In the documentation for themes it is suggested that you can do the following:

const theme = createMuiTheme({
  palette: {
    contrastThreshold: 3,
    tonalOffset: 0.2,
  },
  status: {
    danger: 'orange',
  },
});

But it appears that the ThemeOptions interface accepted by createMuiTheme does not have the properties status, contrastThreshold or tonalOffset. Not sure if its the docs or the typings which are incorrect.

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Typings match what the documentation says you should be able to do

Current Behavior

Typings do not match what the documentation says you should be able to do

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.1 |
| React |v16.4.0|
| browser |Chrome|

[pelotom]

Would you like to submit a PR?

[franklixuefei]

I'll take a stab on it.

[franklixuefei]

@Slessi I think only status is missing in the ThemeOptions. Both contrastThreshold and tonalOffset are props under PaletteOptions, which are already there.

[oliviertassinari]

status is just an example. People can provide what ever they wish. We shouldn't have any code specific for it.

[franklixuefei]

@oliviertassinari I see. Then I think we should allow the flexiblity in typings for people to specify any props. I'll make the change accordingly in that PR.

[pelotom]

If this is just about theme customization, is it not covered by this?

[franklixuefei]

@pelotom Good point. I didn't read that part.

[Slessi]

Both contrastThreshold and tonalOffset are props under PaletteOptions, which are already there.

@franklixuefei They were in Palette but not PaletteOptions, not sure why the need for the multiple interfaces but I see in the PR you submitted you've added them now, thanks :)

[Slessi]

status is just an example. People can provide what ever they wish. We shouldn't have any code specific for it.

I see. Then I think we should allow the flexiblity in typings for people to specify any props. I'll make the change accordingly in that PR.

@franklixuefei Was this handled in your PR? Doesn't work for me when I try it out with the changes.

[oliviertassinari]

Was this handled in your PR?

@Slessi No, you need to follow the docs.

[Slessi]

The docs are what brought me here: https://material-ui.com/customization/themes/#createmuitheme-options-theme

This was listed as an example:

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: green,
  },
  status: {
    danger: 'orange',
  },
});

And in TS this results in:

Argument of type '{ palette: { primary: Color; secondary: Color; }; status: { danger: string; }; }' is not assignable to parameter of type 'ThemeOptions | undefined'.
Object literal may only specify known properties, and 'status' does not exist in type 'ThemeOptions | undefined'.

[pelotom]

@Slessi for theme customization in TypeScript see https://material-ui.com/guides/typescript/#customization-of-theme

[Slessi]

@pelotom aha, didn't realise that was how you're expected to do it in TS. Thanks

[nagarajay]

@pelotom @Slessi - I am also stuck on this problem. I tried it as the docs say but could not get contrastThreshold and tonalOffset to work. Appreciate your help.

I think I got it to work as with the same logic, as given in docs, I changed the PaletteOptions in createPalette declaration.

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

declare module "@material-ui/core/styles/createPalette" {
  interface Palette {
    contrastThreshold: number;
    tonalOffset: number;
  }

  interface PaletteOptions {
    contrastThreshold?: number;
    tonalOffset?: number;
  }
}

If my approach is incorrect please let me know.

[pelotom]

@nagarajay so it's working then? It looks fine to me.

[nagarajay]

@pelotom Yes! It seems to be working. Thanks for providing direction.

[micahstubbs]

@nagarajay naive question here: what did you name the file that you put the augmented module declaration in?

[oliviertassinari]

@micahstubbs Does this help? https://stackoverflow.com/questions/42262565/how-to-augment-typescript-interface-in-d-ts

[micahstubbs]

yes it does, thanks @oliviertassinari! in our project, we ended up following that pattern and putting it in:

src/types/material-ui.d.ts