title: TypeScript - Extending individual props which is extended from a parent type
body: <p>Example with error: <a href="https://codesandbox.io/s/flamboyant-lederberg-w16pio?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/flamboyant-lederberg-w16pio?file=/src/App.tsx</a></p>
  <p>I am trying to extend from Mui's types to add a few more variants. I'm already extending from Muis base props. <code>interface IText extends TypographyProps {</code></p>
  <p>I'm after avoiding having to manage all of the types that Mui have already defined. In this exact case it is here:</p>
  <pre><code>&quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | &quot;h5&quot; | &quot;h6&quot; | &quot;subtitle1&quot; | &quot;subtitle2&quot; | &quot;body1&quot; | &quot;body2&quot; | &quot;caption&quot; | &quot;button&quot; | &quot;overline&quot;
  </code></pre>
  <p>In theory, the final outcome of the props would be:</p>
  <pre><code> &quot;inherit&quot; | &quot;caption12r&quot; | &quot;caption12ruc&quot; | &quot;caption12buc&quot; | &quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | &quot;h5&quot; | &quot;h6&quot; | &quot;subtitle1&quot; | &quot;subtitle2&quot; | &quot;body1&quot; | &quot;body2&quot; | &quot;caption&quot; | &quot;button&quot; | &quot;overline&quot; 
  </code></pre>
  <h2>Error</h2>
  <p><a href="https://i.stack.imgur.com/Pr8Ex.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pr8Ex.png" alt="enter image description here" /></a></p>
  <pre><code>TS2769: No overload matches this call.   Overload 1 of 2, '(props: { component: ElementType&lt;any&gt;; } &amp; SystemProps&lt;Theme&gt; &amp; { align?: &quot;right&quot; | &quot;left&quot; | &quot;inherit&quot; | &quot;center&quot; | &quot;justify&quot; | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial&lt;...&gt; | undefined; } &amp; CommonProps &amp; Omit&lt;...&gt;): Element', gave the following error.     Type '{ &quot;data-name&quot;: string; component?: string | undefined; variant?: &quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | &quot;h5&quot; | &quot;h6&quot; | &quot;subtitle1&quot; | &quot;subtitle2&quot; | &quot;body1&quot; | &quot;body2&quot; | &quot;caption&quot; | &quot;button&quot; | &quot;overline&quot; | ... 4 more ... | undefined; ... 352 more ...; onTransitionEndCapture?: TransitionEventHandler&lt;...&gt; | undefined; }' is not assignable to type '{ component: ElementType&lt;any&gt;; }'.       Types of property 'component' are incompatible.         Type 'string | undefined' is not assignable to type 'ElementType&lt;any&gt;'.           Type 'undefined' is not assignable to type 'ElementType&lt;any&gt;'.   Overload 2 of 2, '(props: DefaultComponentProps&lt;TypographyTypeMap&lt;{}, &quot;span&quot;&gt;&gt;): Element', gave the following error.     Type '{ &quot;data-name&quot;: string; component?: string | undefined; variant?: &quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | &quot;h5&quot; | &quot;h6&quot; | &quot;subtitle1&quot; | &quot;subtitle2&quot; | &quot;body1&quot; | &quot;body2&quot; | &quot;caption&quot; | &quot;button&quot; | &quot;overline&quot; | ... 4 more ... | undefined; ... 352 more ...; onTransitionEndCapture?: TransitionEventHandler&lt;...&gt; | undefined; }' is not assignable to type '{ align?: &quot;right&quot; | &quot;left&quot; | &quot;inherit&quot; | &quot;center&quot; | &quot;justify&quot; | undefined; children?: ReactNode; classes?: Partial&lt;TypographyClasses&gt; | undefined; ... 5 more ...; variantMapping?: Partial&lt;...&gt; | undefined; }'.       Types of property 'variant' are incompatible.         Type '&quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | &quot;h5&quot; | &quot;h6&quot; | &quot;subtitle1&quot; | &quot;subtitle2&quot; | &quot;body1&quot; | &quot;body2&quot; | &quot;caption&quot; | &quot;button&quot; | &quot;overline&quot; | &quot;inherit&quot; | &quot;caption12r&quot; | &quot;caption12ruc&quot; | &quot;caption12buc&quot; | undefined' is not assignable to type '&quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | &quot;h5&quot; | &quot;h6&quot; | &quot;subtitle1&quot; | &quot;subtitle2&quot; | &quot;body1&quot; | &quot;body2&quot; | &quot;caption&quot; | &quot;button&quot; | &quot;overline&quot; | &quot;inherit&quot; | undefined'.
  </code></pre>
  <h2>Code where extending is failing</h2>
  <pre><code>import React from &quot;react&quot;;
  import { Typography as MUITypography, TypographyProps } from &quot;@mui/material&quot;;
  import { OverridableStringUnion } from &quot;@mui/types&quot;;
  import { Variant } from &quot;@mui/material/styles/createTypography&quot;;
  import { TypographyPropsVariantOverrides } from &quot;@mui/material/Typography/Typography&quot;;
  
  interface IText extends TypographyProps {
    component?: string;
    variant?: OverridableStringUnion&lt;
      Variant | &quot;inherit&quot; | &quot;caption12r&quot; | &quot;caption12ruc&quot; | &quot;caption12buc&quot;,
      TypographyPropsVariantOverrides
    &gt;;
  }
  </code></pre>