title: How to extend TS interface for (MUI) React Component using styled-components?
body: <p>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 <code>styled(MUIButton)</code> to build off of the native MUI <code>Button</code>. 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.</p>
  <p>any thoughts?</p>
  <p>relevant articles: <a href="https://stackoverflow.com/questions/46152782/how-to-extend-props-for-material-ui-components-using-typescript">How to extend props for Material-UI components using Typescript?</a></p>
  <p>error:</p>
  <p><a href="https://i.stack.imgur.com/QVbY8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QVbY8.png" alt="enter image description here" /></a></p>
  <p>code:</p>
  <pre><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 =&gt; (
    &lt;StyledButton format={format} variant={variant}&gt;
      {label}
    &lt;/StyledButton&gt;
  );
  
  Button.defaultProps = {
    format: 'primary',
    variant: 'contained',
  };
  
  export default Button;
  
  const StyledButton = styled(MUIButton)&lt;IButton&gt;`
    //? contained variant (default)
    ${({ format, theme }) =&gt; `
    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;
    &amp;:hover {
      background-color: ${darken(theme.palette.colors.main, 0.2)};
    }
    `}
  ...
  }
  </code></pre>