Skip to content

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

@Dudrie

Description

@Dudrie

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions