[TypographyProps] add "component" property to typescript types #19512

srghma · 2020-02-01T19:46:52Z

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

TypographyProps doesnt have component prop

Expected Behavior 🤔

TypographyProps should have component prop

Steps to Reproduce 🕹

Steps:

import { TypographyProps } from '@material-ui/core/Typography';

let props : TypographyProps = { classes: {} ,  children: [], component: "a" };

does not compile

$ tsc ./test.ts
test.ts:3:62 - error TS2322: Type '{ classes: {}; children: undefined[]; component: string; }' is not assignable to type 'OverrideProps<TypographyTypeMap<{}, "span">, "span">'.
  Object literal may only specify known properties, and 'component' does not exist in type 'OverrideProps<TypographyTypeMap<{}, "span">, "span">'.

3 let props : TypographyProps = { classes: {} ,  children: [], component: "a" };
                                                               ~~~~~~~~~~~~~~


Found 1 error.

second example

this compiles

import React from 'react';
import Typography from '@material-ui/core/Typography';

export default function Types() {
  return (
    <div>
      <Typography variant="h1" component="h2" gutterBottom>
        h1. Heading
      </Typography>
    </div>
  );
}

this compiles too

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { TypographyProps } from '@material-ui/core/Typography';

const attrs: TypographyProps = {
  variant: "h1" ,
  gutterBottom: true,
}

export default function Types() {
  return (
    <div>
      <Typography {...attrs}>
        h1. Heading
      </Typography>
    </div>
  );
}

but this does not

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { TypographyProps } from '@material-ui/core/Typography';

const attrs: TypographyProps = {
  variant: "h1" ,
  component: "h2",
  gutterBottom: true,
}

export default function Types() {
  return (
    <div>
      <Typography {...attrs}>
        h1. Heading
      </Typography>
    </div>
  );
}

error

Type '{ variant: "h1"; component: string; gutterBottom: true; }' is not assignable to type '{ align?: Alignment; color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error"; display?: "inline" | "initial" | "block"; gutterBottom?: boolean; noWrap?: boolean; paragraph?: boolean; variant?: "button" | ... 13 more ... | "srOnly"; variantMapping?: Partial<...>; } & Common...'.
  Object literal may only specify known properties, and 'component' does not exist in type '{ align?: Alignment; color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error"; display?: "inline" | "initial" | "block"; gutterBottom?: boolean; noWrap?: boolean; paragraph?: boolean; variant?: "button" | ... 13 more ... | "srOnly"; variantMapping?: Partial<...>; } & Common...'.ts(2322)

but if I do

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { TypographyProps } from '@material-ui/core/Typography';

const attrs: TypographyProps & { component: React.ElementType } = {
  variant: "h1" ,
  component: "h2",
  gutterBottom: true,
}

export default function Types() {
  return (
    <div>
      <Typography {...attrs}>
        h1. Heading
      </Typography>
    </div>
  );
}

it compiles again

Context 🔦

https://github.com/dwhitney/purescript-react-basic-mui/issues/28#issuecomment-581070959

Your Environment 🌎

Tech	Version
Material-UI	master
React
Browser
TypeScript

The text was updated successfully, but these errors were encountered:

srghma · 2020-02-01T19:47:27Z

#19510

support · 2020-02-01T19:49:44Z

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

eps1lon · 2020-02-01T19:49:44Z

Please fill out the template.

srghma · 2020-02-01T19:58:30Z

I found, there is no issue on Material-UI side

srghma · 2020-02-02T11:30:05Z

@eps1lon how can I reopen this issue, I have updated the description, it's material-ui issue

srghma · 2020-02-02T11:32:38Z

so, component: React.ElementType should be added either:

to TypographyProps
or to OverrideProps (because maybe not only TypographyProps have this bug, AND because OverridableComponent does that, it merges { component: C } with other props

export interface OverridableComponent<M extends OverridableTypeMap> {
  <C extends React.ElementType>(props: { component: C } & OverrideProps<M, C>): JSX.Element;
  (props: DefaultComponentProps<M>): JSX.Element;
}

)

what is better?

srghma · 2020-03-20T17:23:05Z

Yes, other components are affected too

e.g. this is not possible

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import { AvatarProps } from '@material-ui/core/Avatar';

const attrs: AvatarProps = {
  alt: "My Alt" ,
  component: "span", // Type '{ alt: string; component: string; }' is not assignable to type '{ alt?: string; imgProps?: ImgHTMLAttributes<HTMLImageElement>; sizes?: string; src?: string; srcSet?: string; variant?: "circle" | "rounded" | "square"; } & CommonProps<AvatarTypeMap<{}, "div">> & Pick<...>'.
// Object literal may only specify known properties, and 'component' does not exist in type '{ alt?: string; imgProps?: ImgHTMLAttributes<HTMLImageElement>; sizes?: string; src?: string; srcSet?: string; variant?: "circle" | "rounded" | "square"; } & CommonProps<AvatarTypeMap<{}, "div">> & Pick<...>'
}

export default function Types() {
  return (
    <div>
      <Avatar {...attrs}>
        H
      </Avatar>
    </div>
  );
}

but this is

import React from 'react';
import Avatar from '@material-ui/core/Avatar';

export default function Types() {
  return (
    <div>
      <Avatar alt="My Alt" component="span">
        H
      </Avatar>
    </div>
  );
}

thus it makes sense to fix OverrideProps

…bleComponent" does (mui#19512)

oliviertassinari · 2020-03-20T23:16:51Z

When diving in #20191, I was wondering if developers building on top of the xxxProps wouldn't face this problem, it seems that they do. Something is off with the TypographyProps type, it doesn't account for the default component (DefaultComponentProps) nor the component prop support of the Typography component. Basically, it seems that we can no longer use these types for wrapping. For instance:

import React from 'react';
import Typography, { TypographyProps }  from '@material-ui/core/Typography';

export default function Types(props: TypographyProps) {
  return (
      <Typography {...props}>
        h1. Heading
      </Typography>
  );
}

StevenVerbiest · 2020-05-06T15:20:59Z

I'm having the same issue when using the Typography component as a styled component:

// Property 'component' does not exist on type [...]
<StyledTypography variant="h3" component="h2">
    Organization
</StyledTypography>

export const StyledTypography = styled(Typography)``

Edit
Not sure if my issue was relevant, but I managed to find a fix for the styled-components issue: #13921 (comment)

nstolmaker · 2021-03-04T18:14:05Z

I made a hacky solution for Typography, check out my comment on this other issue

oliviertassinari · 2021-03-04T18:17:03Z

I'm closing for now. Let's wait for a new report on v5.

zeestack · 2022-03-02T05:51:13Z

This issue still exist in v5. What is the best possible way to reopen it?

jesus-escalona · 2022-04-21T00:32:59Z

This issue still exist in v5. What is the best possible way to reopen it?

This helped me.
#13921 (comment)

ManuC84 · 2022-06-28T13:03:10Z

This still happens. Is there a fix if one does not want to use styled ?

@srghma 's last example actually worked for me as a fix (thanks a lot)

cyrilchapon · 2022-07-11T08:53:08Z

I'm getting another issue, but I suspect it being intimately related to the same core issue.

const ModuleTitle: FunctionComponent<TypographyProps> = (props) => (
  <Typography variant='h5' {...props} />
)

const Index = (props) => (
  <Container>
    <ModuleTitle>Hey</ModuleTitle>
  </Container>
)

Gives me

const ModuleTitle: FunctionComponent<Partial<Record<"typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform", any>>>
Type '{ children: string; }' has no common property with type 'IntrinsicAttributes & Partial<Record<"typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform", any>>'.

(trying not to reopen, just tell me if unrelated, I'll delete that comment)

Alesich · 2022-09-06T08:45:19Z

I also have the same issue with:
"@mui/material": "^5.9.3",
"@mui/styles": "^5.10.2",

TS2322: Type '{ children: string; variant: "subtitle2"; component: string; }' is not assignable to type 'IntrinsicAttributes & TypographyProps'. Property 'component' does not exist on type 'IntrinsicAttributes & TypographyProps'.

spmsupun · 2023-06-05T12:26:35Z

@oliviertassinari any news on this?

justasdev · 2023-06-06T10:57:48Z

This definitely should not be closed. We are still experiencing this issue with TypographyProps as well as other component's props with component prop.

francescovenica · 2023-07-21T09:38:56Z

any update on this?

oliviertassinari added the support: Stack Overflow Please ask the community on Stack Overflow label Feb 1, 2020

support bot closed this as completed Feb 1, 2020

srghma changed the title ~~[Typography] add "component" property to typescript types~~ [TypographyProps] add "component" property to typescript types Feb 2, 2020

srghma mentioned this issue Feb 2, 2020

fix codegen error "Typography component codegen errors: Properties listed in base row but not found in component props:["component"]" purescript-react-basic-mui/purescript-react-basic-mui#28

Closed

srghma added a commit to srghma/material-ui that referenced this issue Mar 20, 2020

[core] Fix OverrideProps, merge "{ component: C }" to it as "Overrida…

ae2d28f

…bleComponent" does (mui#19512)

srghma added a commit to srghma/material-ui that referenced this issue Mar 20, 2020

[core] Fix OverrideProps, merge "{ component: C }" to it as "Overrida…

487ac47

…bleComponent" does (mui#19512)

oliviertassinari reopened this Mar 20, 2020

support bot removed the support: Stack Overflow Please ask the community on Stack Overflow label Mar 20, 2020

oliviertassinari mentioned this issue Mar 20, 2020

[core] Fix OverrideProps, merge "{ component: C }" to it as "OverridableComponent" does (#19512) #20198

Closed

1 task

oliviertassinari added the typescript label Mar 20, 2020

oliviertassinari closed this as completed Mar 4, 2021

skilldeliver mentioned this issue Jun 22, 2021

Add Typography component with ID and link button podkrepi-bg/frontend#278

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TypographyProps] add "component" property to typescript types #19512

[TypographyProps] add "component" property to typescript types #19512

srghma commented Feb 1, 2020 •

edited

Loading

srghma commented Feb 1, 2020

support bot commented Feb 1, 2020

eps1lon commented Feb 1, 2020

srghma commented Feb 1, 2020

srghma commented Feb 2, 2020

srghma commented Feb 2, 2020 •

edited

Loading

srghma commented Mar 20, 2020

oliviertassinari commented Mar 20, 2020 •

edited

Loading

StevenVerbiest commented May 6, 2020 •

edited by oliviertassinari

Loading

nstolmaker commented Mar 4, 2021

oliviertassinari commented Mar 4, 2021

zeestack commented Mar 2, 2022

jesus-escalona commented Apr 21, 2022 •

edited

Loading

ManuC84 commented Jun 28, 2022 •

edited

Loading

cyrilchapon commented Jul 11, 2022

Alesich commented Sep 6, 2022

spmsupun commented Jun 5, 2023

justasdev commented Jun 6, 2023 •

edited

Loading

francescovenica commented Jul 21, 2023

[TypographyProps] add "component" property to typescript types #19512

[TypographyProps] add "component" property to typescript types #19512

Comments

srghma commented Feb 1, 2020 • edited Loading

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

srghma commented Feb 1, 2020

support bot commented Feb 1, 2020

eps1lon commented Feb 1, 2020

srghma commented Feb 1, 2020

srghma commented Feb 2, 2020

srghma commented Feb 2, 2020 • edited Loading

srghma commented Mar 20, 2020

oliviertassinari commented Mar 20, 2020 • edited Loading

StevenVerbiest commented May 6, 2020 • edited by oliviertassinari Loading

nstolmaker commented Mar 4, 2021

oliviertassinari commented Mar 4, 2021

zeestack commented Mar 2, 2022

jesus-escalona commented Apr 21, 2022 • edited Loading

ManuC84 commented Jun 28, 2022 • edited Loading

cyrilchapon commented Jul 11, 2022

Alesich commented Sep 6, 2022

spmsupun commented Jun 5, 2023

justasdev commented Jun 6, 2023 • edited Loading

francescovenica commented Jul 21, 2023

srghma commented Feb 1, 2020 •

edited

Loading

srghma commented Feb 2, 2020 •

edited

Loading

oliviertassinari commented Mar 20, 2020 •

edited

Loading

StevenVerbiest commented May 6, 2020 •

edited by oliviertassinari

Loading

jesus-escalona commented Apr 21, 2022 •

edited

Loading

ManuC84 commented Jun 28, 2022 •

edited

Loading

justasdev commented Jun 6, 2023 •

edited

Loading