[Typography] Improve custom component types support

[fyodore82]

• [v] I have followed (at least) the PR section of the contributing guide.

Fix #18473

[mui-pr-bot]

No bundle size changes comparing 4e07461...57c238b

Generated by 🚫 dangerJS against 57c238b

[oliviertassinari]

The changes look safe, especially with the added test case (thank you for that) and the prior work with the other components we replicate here.

[oliviertassinari]

@fyodore82 Well done.

[dohomi]

@oliviertassinari @fyodore82 I am missing the right typings after this change. I was using component as a typing prop but this fails after I upgraded.

Property 'component' does not exist on type 'OverrideProps<TypographyTypeMap<{}, "span">, "span">'.
    11 |   const props: TypographyProps = {}
  > 12 |   content.tag && (props.component = content.tag)

[fyodore82]

@dohomi, this became a bit tricky now, but that's how it implemented in OverridableComponent.d.ts which is the base for many other component typing's.

var t: TypographyProps<'a', {component: 'a'}> = {
  component: 'a',
  href: 'a'
}

If you don't know in advance what component you'll use you can do

const content = { tag: 'a' }
const props: TypographyProps<React.ElementType, {component?: string}> = {}
content.tag && (props.component = content.tag)

[rosskevin]

This change makes the export of TypographyProps unused, does it not @fyodore82? So code that used to reference and Pick from TypographyProps I see is now broken and a mismatch for the Typography component itself.

For example:

// simple override of default variant
export const Typo = React.forwardRef<any, TypographyProps>((props, ref) => (
  <Typography variant="body2" ref={ref} {...props} />
))

        // valid
        <Typography component="a" href="url" display="block" />
        // now invalid
        <Typo component="a" href="url" display="block" />

[rosskevin]

I see this is an updated pattern elsewhere in the code (e.g. Chip, Grid, Link etc), but unsure how the *Props exports relate.

[fyodore82]

Pattern I've employed for Typography is used in several other components in Material-UI as you already mentioned. So I've decided not to invent different solution but follow already established mainline.

The TypographyProps and Typography itself are related. Both inherit from OverrideProps interface. Typography does it indirectly, rhru OverridableComponent and TypographyProps does it directly.

forwardRef will also work fine if specialize TypographyProps with correct component

export const Typo = React.forwardRef<any, TypographyProps<'a', {component: 'a'}>>((props, ref) => (
    <Typography variant="body2" ref={ref} {...props} />
))

// now valid
<Typo component="a" href="url" display="block" />

I have also checked how it was before Typography change. This code <Typo component="a" href="url" display="block" /> was not valid due to presence of href attribute. And we had no means to make it valid.

I may suggest to extend Typography documentation and include samples of how to use component prop in different scenarios

[vdh]

@fyodore82 So was the documentation ever updated? Because now I can't use FC<TypographyProps> anymore, which was a bit of a low blow to sneak into a minor release.

[fyodore82]

Did it