Material-ui: [typescript] Can not define custom colors in theme

[xMihai]

Typescript definitions for custom theme colors has been removed. The existing documentation example does not work anymore.

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

One should be able to add custom colors to the Theme, as per documentation example.

createMuiTheme({
  status: {
      danger: orange[500],
  },
})

When using withStyles, the custom colors would be specified as CustomOptions.

withStyles((theme: Theme<CustomOptions> => {});

Current Behavior

Typescript reports this error on the custom color definition (documentation example): Object literal may only specify known properties, and 'status' does not exist in type 'ThemeOptions | undefined'.

Typescript reports error when using the theme: Type 'Theme' is not generic.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | beta.22 |
| React | 16.0.0 |

[pelotom]

Theme customization in TypeScript is now done via module augmentation instead of generics; the latter wasn't type safe. Check out this section:

https://material-ui-next.com/guides/typescript/#customization-of-theme