¿Cómo extender los accesorios para los componentes de Material-UI usando Typescript?

Solución:

El siguiente código me funciona

import { Button, StyledComponent } from 'material-ui';
import { ButtonProps } from 'material-ui/Button';

declare module 'material-ui' {
  export interface MyProps {

    exact?: boolean;
    to?: string;
  }
  export class Button extends StyledComponent<ButtonProps & MyProps> {
  }

}

No tengo el problema con "TS2693: 'Button' only refers to a type, but is being used as a value here. y también estoy usando TypeScript 2.5.2

import React, { FC } from 'react';

import { Button, ButtonProps } from '@material-ui/core';

interface IProps extends ButtonProps {} // your custom props

const ButtonHco: FC<IProps> = ({
  variant,
  color,
  children,
  size,
  disabled
}) => {
  return (
    <Button variant={variant} color={color} size={size} disabled={disabled}>
      {children}
    </Button>
  );
};

export default ButtonHco;

Aquí hay una muestra minimalista de cómo extender un botón Material UI (no probado). El campo extendido simplemente se agregará después de la etiqueta del botón.

import * as React from 'react';
import { ButtonProps } from '@material-ui/core/Button';
import { Button } from '@material-ui/core';

interface Props{
  extendedField: string;
}

export class MyExtendedButton extends React.Component<ButtonProps & Props>{
  render(){

    const {
      extendedField,
      children,
      ...buttonProps,
    } = this.props;

    return (<Button {...buttonProps}>
      {children}
      : <span style={{color: 'red'}}>
        {extendedField}
      </span>
    </Button>);
  }
}

---

---

Utiliza Nuestro Buscador