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

[simonvizzini]

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

[pelotom]

There's a small problem with the proposed solution, which is that it isn't type safe. Since the place where the global theme is defined is divorced from the place where we want to use it, there's no way to enforce that your global theme is a MyTheme. In fact you could claim to have any old type of theme, anywhere you use withStyles, and the type system will just happily agree with you:

  withStyles((theme: Theme<{ foo: { bar: number } }>) => ({
    root: {
      lineHeight: theme.foo.bar,
    },
  }));

It may be an ok compromise to make, I just want to point out that it's really no safer than doing a cast like this:

  withStyles(theme => ({
    root: {
      backgroundColor: (theme as MyTheme).status.danger,
    },
  }));

In general this is making me wonder why there is any advantage to using withStyles with a callback, vs. exporting your theme from a module and then importing it everywhere that you want to use it:

// src/theme.ts

import createMuiTheme from 'material-ui/styles/createMuiTheme';
import { red, purple } from 'material-ui/colors';

export default createMuiTheme({
  palette: {
    primary: red,
    secondary: purple,
  },
  myCustomScalar: 3,
});

// src/component.ts

import * as React from 'react'
import { withStyles } from 'material-ui/styles'
import theme from './theme'

export default withStyles({
  root: {
    margin: theme.spacing.unit * theme.myCustomScalar
  }
})(...);

[pelotom]

Deleted some comments that were not pertinent to the issue.

[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.

[gariggio]

Even though these bussines variables are theme related?

[pelotom]

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

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