-
-
Notifications
You must be signed in to change notification settings - Fork 32.6k
Description
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 🕹
- Add demo in ts for ImgMediaCard.
- 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 |