Extend material Button with Typescript

Butto.tsx

import * as React from 'react';
import * as classNames from 'classnames';

import { Theme } from 'material-ui/styles';
import { withStyles, WithStyles, StandardProps } from 'material-ui';
import MButton, { ButtonProps, ButtonClassKey } from 'material-ui/Button';

export const styles = (theme: Theme) => ({
  root: {
    borderRadius: 4,
  },
  // Size variation
  sizeDefault: {
    minWidth: 120,
    minHeight: 50,
    // fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1),
  },
  sizeLarge: {
    minWidth: 124,
    minHeight: 60,
    // fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1),
  },
  sizeSmall: {
    minWidth: 84,
    minHeight: 40,
    // fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1),
  },
  sizeExtra: {
    minWidth: 68,
    minHeight: 30,
    // fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1),
  },
});

export type Size = 'default' | 'large' | 'small' | 'extra';

type ClassKey =
  | ButtonClassKey
  | 'root'
  | 'sizeDefault'
  | 'sizeLarge'
  | 'sizeSmall'
  | 'sizeExtra';

interface Props extends StandardProps<
  ButtonProps,
  ClassKey
> {
  // dense: boolean;
  // disabled: boolean;
  // fab: boolean;
  // disableFocusRipple: boolean;
  // raised: boolean;
  // disableRipple: boolean;
  // type: string;
  size?: Size;
}

class Button extends React.Component<Props & WithStyles<ClassKey>> {
  static defaultProps = {
    // dense: false,
    // disabled: false,
    // fab: false,
    // disableFocusRipple: false,
    // raised: false,
    // disableRipple: false,
    // type: 'button',
    size: 'default',
  };

  render() {
    const {
      classes,
      className: classNameProp,
      dense,
      size,
      fab,
      ...other
    } = this.props;

    const sized = size || (dense ? 'extra' : size);
    const className = classNames(
      {
        [classes.root]: true,
        [classes.sizeDefault]: !fab && sized === 'default',
        [classes.sizeLarge]: !fab && sized === 'large',
        [classes.sizeSmall]: !fab && sized === 'small',
        [classes.sizeExtra]: !fab && sized === 'extra',
        [classes.dense]: dense,
      },
      classNameProp,
    );

    return (
      <MButton className={className} {...other} />
    );
  }

}

export default withStyles(styles)<Props>(Button);