Material-ui: Using withTheme() with typescript

Created on 6 Sep 2017 · 5Comments · Source: mui-org/material-ui

Problem description

When I try to wrap my component withTheme() type script show me next error.

Argument of type 'ComponentClass<StyledComponentProps<{}>>' is not assignable to parameter of type 'ComponentType<StyledComponentProps<{}> & { theme: Theme<{}>; }>'.
  Type 'ComponentClass<StyledComponentProps<{}>>' is not assignable to type 'StatelessComponent<StyledComponentProps<{}> & { theme: Theme<{}>; }>'.
    Type 'ComponentClass<StyledComponentProps<{}>>' provides no match for the signature '(props: StyledComponentProps<{}> & { theme: Theme<{}>; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

Steps to reproduce

Square.tsx

import * as React from 'react';
import { withStyles, withTheme, StyleRulesCallback } from 'material-ui/styles';

import Paper from 'material-ui/Paper';
import Typography from 'material-ui/Typography';

const styles: StyleRulesCallback = theme => ({
  root: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    userSelect: 'none'

  }
});

interface Props {
    theme: object;
    content: number;
    isRed: boolean;
}

interface ButtonClassName {
  root: string;
}

function Button(props: Props & { classes: ButtonClassName } ) {
  const red = 'red';
  const black = 'black';
  const textColor = props.isRed ? red : black;

  return (
    <Paper className={props.classes.root}  elevation={4}>
      <Typography style={{color : textColor}} type="headline">
          <h1>Hello World</h1>
        {props.content}
      </Typography>
    </Paper>
  );
}

export default withTheme(withStyles(styles)(Button));