How to extend props for Material-UI components using Typescript?

The following code works for me

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> {
  }

}

I don't have the problem with "TS2693: 'Button' only refers to a type, but is being used as a value here. and I'm also using 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;

A bit late, but here is another solution. See also the MUI docs Usage of component prop . The following button uses the Link component. It allso uses the Link's specific props with their types. It allso adds its own sesific props.

import React from 'react'
import MuiButton, {ButtonProps} from '@material-ui/core/Button'

interface ButtonOptions {
    // your custom options with their types
  }

const Button = <C extends React.ElementType>(props: ButtonProps<C, {component?: C}> & ButtonOptions ) => {
  return <MuiButton {...props}>{props.children}</MuiButton>
}

export default Button
 
// use like this:  
import {Link} from 'react-router-dom'
<Button component={Link} to={'/somelocation'}>