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.
TypeScript should not throw an error if you use properties which get passed to the used component.
TypeScript throws an error if you use these properties because CardMediaProps don't account for additional props being passed down.
CardMedia.
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.
| 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 |
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.
Most helpful comment
Fixed in #15098 and verified in #15130.