I've been trying to figure out how to resolve this overload issue and so far no dice. I am using Typescript, Styled-components, and material-ui. I am using `styled(MUIButton)` to build off of the native MUI `Button`. Through console.logs I can see my props passing into the component, however I don't know how to set the typing so the overload error goes away.

any thoughts?

relevant articles: [How to extend props for Material-UI components using Typescript?](https://stackoverflow.com/questions/46152782/how-to-extend-props-for-material-ui-components-using-typescript)

error:

[![enter image description here](https://i.stack.imgur.com/QVbY8.png)](https://i.stack.imgur.com/QVbY8.png)

code:

```
import { default as MUIButton, ButtonProps } from '@material-ui/core/Button';
import styled, { css } from 'styled-components';
import { darken } from '@material-ui/core/styles';

interface IButton extends ButtonProps {
  format?: 'primary' | 'secondary';
  variant?: 'contained' | 'outlined' | 'text';
  label: string;
}

const Button = ({ format, variant, label }: IButton): JSX.Element => (
  <StyledButton format={format} variant={variant}>
    {label}
  </StyledButton>
);

Button.defaultProps = {
  format: 'primary',
  variant: 'contained',
};

export default Button;

const StyledButton = styled(MUIButton)<IButton>`
  //? contained variant (default)
  ${({ format, theme }) => `
  background-color: ${
    format === 'primary'
      ? theme.palette.colors.main
      : theme.palette.colors.secondary
  };
  color: ${theme.palette.font.secondary};
  font-weight: ${theme.agnosticStyles.font.weight.bold};
  padding: .7rem 4rem;
  &:hover {
    background-color: ${darken(theme.palette.colors.main, 0.2)};
  }
  `}
...
}

```