Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TypeScript] CardMediaProps don't include certain props, i.e. "alt" of an "img" component #15010

Closed
2 tasks done
Dudrie opened this issue Mar 22, 2019 · 2 comments
Closed
2 tasks done
Labels
bug 🐛 Something doesn't work typescript
Milestone

Comments

@Dudrie
Copy link
Contributor

Dudrie commented Mar 22, 2019

While creating the TypeScript demo for the cards documentation I recognized that ts throws a compile error on the CardMedia component used in ImgMediaCard:

Type '{ component: "img"; alt: string; className: string; height: string; image: string; title: string; }' is not assignable to type 'IntrinsicAttributes & CardMediaProps & { children?: ReactNode; }'.
Property 'alt' does not exist on type 'IntrinsicAttributes & CardMediaProps & { children?: ReactNode; }'.ts(2322)

This is (in this case) due to the fact that the "img" component has the properties "alt" and "height" but the CardMediaProps don't account for additional props outside the standard props of an HTMLDivElement.

However, this does neither the CardMedia nor the ImgMediaCard prevent from working properly. It only prevents the TypeScript demo from being added to the documentation.

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

TypeScript should not throw an error if you use properties which get passed to the used component.

Current Behavior 😯

TypeScript throws an error if you use these properties because CardMediaProps don't account for additional props being passed down.

Steps to Reproduce 🕹

  1. Add demo in ts for ImgMediaCard.
  2. The ts compiler will throw an error on CardMedia.

Context 🔦

I tried to add demos for all card demos in ts. The problem with the typing of the properties makes the tslint check fail for the ImgMediaCard. But, as stated above, this is only a typing issue - the CardMedia component itself works.

Your Environment 🌎

Tech Version
Material-UI v4.0.0-alpha.4
React 16.8.0
Browser Chrome (v72)
TypeScript 3.3.3
VS Code 1.32.3
@eps1lon eps1lon added this to the v4 milestone Mar 22, 2019
@eluchsinger
Copy link
Contributor

Workaround in the meantime:
Define a temporary props variable and pass the props using the spread operator.

const cardmediaProps = {
    height: "140"
};
<CardMedia
   component={MyComponent}
   {...cardmediaProps}
   />

@eps1lon
Copy link
Member

eps1lon commented Apr 5, 2019

Fixed in #15098 and verified in #15130.

@eps1lon eps1lon closed this as completed Apr 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work typescript
Projects
None yet
Development

No branches or pull requests

3 participants