title: Use data- attributes with Material UI and Typescript
body: <p>I'm trying to add a data-test-id attribute to a button in React, but Typescript is grumpy about it. How can I add this property to ALL Material components?</p>
  <pre class="lang-js prettyprint-override"><code>import { Button } from '@material-ui/core'
  
  &lt;Button dataTestId='my-test-id'&gt;
    Click Me!
  &lt;/Button&gt;
  </code></pre>
  <p>Typsescript Error:</p>
  <pre><code>TS2769: No overload matches this call.
    Overload 1 of 3, '(props: { href: string; } &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; fullWidth?: boolean; href?: string; size?: &quot;medium&quot; | ... 1 more ... | &quot;small&quot;; startIcon?: ReactNode; variant?: &quot;text&quot; | ... 1 more ... | &quot;contained&quot;; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;): Element', gave the following error.
      Type '{ children: string; endIcon: Element; variant: &quot;text&quot;; style: { textTransform: &quot;lowercase&quot;; }; onClick: (event: MouseEvent&lt;HTMLElement, MouseEvent&gt;) =&gt; void; dataTestId: string; }' is not assignable to type 'IntrinsicAttributes &amp; { href: string; } &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: &quot;text&quot; | ... 1 more ... | &quot;contained&quot;; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;'.
        Property 'dataTestId' does not exist on type 'IntrinsicAttributes &amp; { href: string; } &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: &quot;text&quot; | ... 1 more ... | &quot;contained&quot;; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;'.
    Overload 2 of 3, '(props: { component: ElementType&lt;any&gt;; } &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: &quot;text&quot; | ... 1 more ... | &quot;contained&quot;; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;): Element', gave the following error.
      Property 'component' is missing in type '{ children: string; endIcon: Element; variant: &quot;text&quot;; style: { textTransform: &quot;lowercase&quot;; }; onClick: (event: MouseEvent&lt;HTMLElement, MouseEvent&gt;) =&gt; void; dataTestId: string; }' but required in type '{ component: ElementType&lt;any&gt;; }'.
    Overload 3 of 3, '(props: DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ButtonTypeMap&lt;{}, &quot;button&quot;&gt;&gt;&gt;): Element', gave the following error.
      Type '{ children: string; endIcon: Element; variant: &quot;text&quot;; style: { textTransform: &quot;lowercase&quot;; }; onClick: (event: MouseEvent&lt;HTMLElement, MouseEvent&gt;) =&gt; void; dataTestId: string; }' is not assignable to type 'IntrinsicAttributes &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: &quot;text&quot; | ... 1 more ... | &quot;contained&quot;; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;'.
        Property 'dataTestId' does not exist on type 'IntrinsicAttributes &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: &quot;text&quot; | ... 1 more ... | &quot;contained&quot;; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;'.
  </code></pre>
  <p>So, I basically want to tell typescript that <code>dataTestId</code> should be a valid property on any React component.</p>