[TypeScript] Currently not possible to use business variables in a theme with "withStyles"

I’m using TypeScript and I’m trying to define custom business variables in my theme, as described in the docs here.

This is what I have so far:

interface MyThemeExtension {
    status: {
        danger: string
    };
}

export const theme = createMuiTheme<MyThemeExtension>({
    status: {
        danger: orange[500]
    }
});

export type MyTheme = Theme<MyThemeExtension>;

But now I’m having trouble to use the withStyles HoC, because the theme argument of StyleRulesCallback is of type Theme. I’m no TS expert, but I think the types of Theme and StyleRulesCallback need to be changed to something like this (at least this worked for me):

-type StyleRulesCallback<ClassKey extends string = string> = (theme: Theme) => StyleRules<ClassKey>;
+type StyleRulesCallback<ClassKey extends string = string, T = {}> = (theme: Theme<T>) => StyleRules<ClassKey>;

-function withStyles<ClassKey extends string>(
+function withStyles<ClassKey extends string, T = {}>(
-  style: StyleRules<ClassKey> | StyleRulesCallback<ClassKey>,
+  style: StyleRules<ClassKey> | StyleRulesCallback<ClassKey, T>,
  options?: WithStylesOptions
): <P>(
  component: React.ComponentType<P & WithStyles<ClassKey>>
) => React.ComponentType<P & StyledComponentProps<ClassKey>>;

These changes allowed me to do: withStyles((theme: MyTheme) => ({...})

Again, I’m not sure if this is the correct way. Please let me know.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.21
React	16.1.1
TypeScript	2.5.3

[simonvizzini]

Thanks for the insight, @pelotom! I totally agree that the proposed solution with regards to type safety doesn’t make much sense, and so I will just import and use the theme directly, instead of using a callback with withStyles. Same for custom business variables, I’ll just import them wherever I need them.

So this issue can be closed from my side.

[pelotom]

@gariggio I suggest taking a look at this page for the latest best practice for customizing the theme in TypeScript:

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