[Card] Fix TypeScript not recognizing "component" prop

packages/material-ui/src/CardHeader/CardHeader.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import CardHeader from '@material-ui/core/CardHeader';
+
+declare var yada: () => void;
+
+const CardHeaderTest = () => {
+  const FunctionComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
+  function notAnElementType(): void {
+    yada();
+  }
+  function SimpleFunctionComponent() {
+    return <div />;
+  }
+  return (
+    <div>
+      <CardHeader />
+      <CardHeader
+        titleTypographyProps={{ align: 'center' }}
+        subheaderTypographyProps={{ align: 'center' }}
+      />
+      <CardHeader
+        titleTypographyProps={{ align: 'center', component: 'h1' }}
+        subheaderTypographyProps={{ align: 'center', component: 'p' }}
+      />
+      <CardHeader
+        titleTypographyProps={{ align: 'center', component: FunctionComponent }}
+        subheaderTypographyProps={{ align: 'center', component: FunctionComponent }}
+      />
+      <CardHeader
+        titleTypographyProps={{ align: 'center', component: SimpleFunctionComponent }}
+        subheaderTypographyProps={{ align: 'center', component: SimpleFunctionComponent }}
+      />
+      // $ExpectError
+      <CardHeader
+        titleTypographyProps={{ align: 'center', component: notAnElementType }}
+        subheaderTypographyProps={{ align: 'center', component: notAnElementType }}
+      />
+      // $ExpectError
+      <CardHeader
+        titleTypographyProps={{ align: 'center', component: 'my-element' }}
+        subheaderTypographyProps={{ align: 'center', component: 'my-element' }}
+      />
+    </div>
+  );
+};

packages/material-ui/src/ListItemText/ListItemText.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ListItemText from '@material-ui/core/ListItemText';
+
+declare var yada: () => void;
+
+const ListItemTextTest = () => {
+  const FunctionComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
+  function notAnElementType(): void {
+    yada();
+  }
+  function SimpleFunctionComponent() {
+    return <div />;
+  }
+  return (
+    <div>
+      <ListItemText />
+      <ListItemText disableTypography />
+      <ListItemText
+        primaryTypographyProps={{ align: 'center' }}
+        secondaryTypographyProps={{ align: 'center' }}
+      />
+      <ListItemText
+        primaryTypographyProps={{ align: 'center', component: 'h1' }}
+        secondaryTypographyProps={{ align: 'center', component: 'p' }}
+      />
+      <ListItemText
+        primaryTypographyProps={{ align: 'center', component: FunctionComponent }}
+        secondaryTypographyProps={{ align: 'center', component: FunctionComponent }}
+      />
+      <ListItemText
+        primaryTypographyProps={{ align: 'center', component: SimpleFunctionComponent }}
+        secondaryTypographyProps={{ align: 'center', component: SimpleFunctionComponent }}
+      />
+      // $ExpectError
+      <ListItemText
+        primaryTypographyProps={{ align: 'center', component: notAnElementType }}
+        secondaryTypographyProps={{ align: 'center', component: notAnElementType }}
+      />
+      // $ExpectError
+      <ListItemText
+        primaryTypographyProps={{ align: 'center', component: 'my-element' }}
+        secondaryTypographyProps={{ align: 'center', component: 'my-element' }}
+      />
+    </div>
+  );
+};

packages/material-ui/src/Typography/Typography.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { StandardProps, PropTypes } from '..';
-import { OverrideProps, OverridableTypeMap, OverridableComponent } from '../OverridableComponent';
+import { PropTypes } from '..';
+import { OverrideProps, OverridableComponent } from '../OverridableComponent';
 import { Variant as ThemeVariant } from '../styles/createTypography';
 
 type Variant = ThemeVariant | 'srOnly';
@@ -22,6 +22,7 @@ export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'>
     paragraph?: boolean;
     variant?: Variant | 'inherit';
     variantMapping?: Partial<Record<Variant, string>>;
+    component?: React.ElementType;
   };
   defaultComponent: D;
   classKey: TypographyClassKey;