Material-ui: [TypeScript] CardMediaProps don't include certain props, i.e. "alt" of an "img" component

Created on 22 Mar 2019  路  2Comments  路  Source: mui-org/material-ui


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.

  • [x] This is not a v0.x issue.
  • [x] 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 |

bug 馃悰 typescript

Most helpful comment

Fixed in #15098 and verified in #15130.

All 2 comments

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}
   />

Fixed in #15098 and verified in #15130.

Was this page helpful?
0 / 5 - 0 ratings