From bca4565b43b4166f422aa4ba5d8399bb054bef66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 27 Jul 2023 11:52:37 +0200
Subject: [PATCH] [typescript] Add `component` field to `*Props` types (#38084)

Co-authored-by: sai6855 <60743144+sai6855@users.noreply.github.com>
---
 .../mui-material/src/Accordion/Accordion.d.ts |   4 +-
 .../AccordionSummary/AccordionSummary.d.ts    |   4 +-
 packages/mui-material/src/AppBar/AppBar.d.ts  |   4 +-
 packages/mui-material/src/Avatar/Avatar.d.ts  |   4 +-
 .../mui-material/src/Backdrop/Backdrop.d.ts   |   4 +-
 packages/mui-material/src/Badge/Badge.d.ts    |   4 +-
 .../BottomNavigation/BottomNavigation.d.ts    |   4 +-
 .../BottomNavigationAction.d.ts               |   4 +-
 .../src/Breadcrumbs/Breadcrumbs.d.ts          |   4 +-
 packages/mui-material/src/Button/Button.d.ts  |   4 +-
 .../mui-material/src/Button/Button.spec.tsx   |  41 ++++++
 .../src/ButtonBase/ButtonBase.d.ts            |   4 +-
 .../src/ButtonGroup/ButtonGroup.d.ts          |   4 +-
 packages/mui-material/src/Card/Card.d.ts      |   8 +-
 packages/mui-material/src/Card/Card.spec.tsx  |  34 +++++
 .../src/CardActionArea/CardActionArea.d.ts    |   4 +-
 .../src/CardContent/CardContent.d.ts          |   4 +-
 .../src/CardHeader/CardHeader.spec.tsx        |  18 +--
 .../mui-material/src/CardMedia/CardMedia.d.ts |   4 +-
 packages/mui-material/src/Chip/Chip.d.ts      |   4 +-
 .../mui-material/src/Container/Container.d.ts |   4 +-
 packages/mui-material/src/Dialog/Dialog.d.ts  |   2 +-
 .../mui-material/src/Dialog/Dialog.spec.tsx   |  19 ++-
 .../DialogContentText/DialogContentText.d.ts  |   4 +-
 .../src/DialogTitle/DialogTitle.d.ts          |   4 +-
 .../mui-material/src/Divider/Divider.d.ts     |   4 +-
 packages/mui-material/src/Drawer/Drawer.d.ts  |   2 +-
 .../mui-material/src/Drawer/Drawer.spec.tsx   |  19 +++
 packages/mui-material/src/Fab/Fab.d.ts        |   4 +-
 .../src/FormControl/FormControl.d.ts          |   4 +-
 .../src/FormHelperText/FormHelperText.d.ts    |   4 +-
 .../FormHelperText/FormHelperText.spec.tsx    |  61 ++++++++
 .../mui-material/src/FormLabel/FormLabel.d.ts |   4 +-
 packages/mui-material/src/Grid/Grid.d.ts      |   4 +-
 packages/mui-material/src/Grid/Grid.spec.tsx  |  60 +++++++-
 packages/mui-material/src/Icon/Icon.d.ts      |   4 +-
 .../src/IconButton/IconButton.d.ts            |   4 +-
 .../mui-material/src/ImageList/ImageList.d.ts |   4 +-
 .../src/ImageListItem/ImageListItem.d.ts      |   4 +-
 .../src/InputAdornment/InputAdornment.d.ts    |   4 +-
 .../src/InputLabel/InputLabel.d.ts            |   4 +-
 packages/mui-material/src/Link/Link.d.ts      |  20 +--
 packages/mui-material/src/Link/Link.spec.tsx  |  39 ++++-
 packages/mui-material/src/List/List.d.ts      |   4 +-
 .../mui-material/src/ListItem/ListItem.d.ts   |   4 +-
 .../src/ListItemButton/ListItemButton.d.ts    |   4 +-
 .../src/ListSubheader/ListSubheader.d.ts      |   4 +-
 .../mui-material/src/MenuItem/MenuItem.d.ts   |   4 +-
 .../src/MenuItem/MenuItem.spec.tsx            |  68 +++++++++
 .../mui-material/src/MenuList/MenuList.d.ts   |   4 +-
 packages/mui-material/src/Modal/Modal.d.ts    |   4 +-
 .../src/PaginationItem/PaginationItem.d.ts    |   4 +-
 packages/mui-material/src/Paper/Paper.d.ts    |  66 +++++----
 .../mui-material/src/Paper/Paper.spec.tsx     |  37 ++++-
 packages/mui-material/src/Paper/index.d.ts    |   2 +-
 .../mui-material/src/Popover/Popover.d.ts     |   2 +-
 .../mui-material/src/Popover/Popover.spec.tsx |  18 +++
 .../ScopedCssBaseline/ScopedCssBaseline.d.ts  |   4 +-
 .../mui-material/src/Skeleton/Skeleton.d.ts   |   4 +-
 packages/mui-material/src/Slider/Slider.d.ts  |   4 +-
 packages/mui-material/src/Stack/Stack.d.ts    |   4 +-
 .../mui-material/src/Stack/Stack.spec.tsx     |  15 ++
 packages/mui-material/src/Step/Step.d.ts      |   4 +-
 .../src/StepButton/StepButton.d.ts            |   4 +-
 .../mui-material/src/Stepper/Stepper.d.ts     |   4 +-
 .../mui-material/src/SvgIcon/SvgIcon.d.ts     |   4 +-
 packages/mui-material/src/Tab/Tab.d.ts        |   4 +-
 packages/mui-material/src/Table/Table.d.ts    |   4 +-
 .../mui-material/src/TableBody/TableBody.d.ts |   4 +-
 .../src/TableContainer/TableContainer.d.ts    |   4 +-
 .../src/TableFooter/TableFooter.d.ts          |   4 +-
 .../mui-material/src/TableHead/TableHead.d.ts |   4 +-
 .../src/TablePagination/TablePagination.d.ts  |   4 +-
 .../mui-material/src/TableRow/TableRow.d.ts   |   4 +-
 .../src/TableSortLabel/TableSortLabel.d.ts    |   4 +-
 packages/mui-material/src/Tabs/Tabs.d.ts      |   4 +-
 .../src/TextField/TextField.spec.tsx          |  16 +++
 .../src/ToggleButton/ToggleButton.d.ts        |   4 +-
 .../mui-material/src/Toolbar/Toolbar.d.ts     |   4 +-
 .../src/Typography/Typography.d.ts            | 135 +++++++++---------
 .../src/Typography/typography.spec.tsx        |  21 ++-
 packages/mui-system/src/Box/Box.d.ts          |   2 +-
 82 files changed, 751 insertions(+), 190 deletions(-)
 create mode 100644 packages/mui-material/src/Card/Card.spec.tsx
 create mode 100644 packages/mui-material/src/Drawer/Drawer.spec.tsx
 create mode 100644 packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx
 create mode 100644 packages/mui-material/src/MenuItem/MenuItem.spec.tsx
 create mode 100644 packages/mui-material/src/Popover/Popover.spec.tsx
 create mode 100644 packages/mui-material/src/Stack/Stack.spec.tsx

diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts
index d6790cb992caf0..7d443c40476f5b 100644
--- a/packages/mui-material/src/Accordion/Accordion.d.ts
+++ b/packages/mui-material/src/Accordion/Accordion.d.ts
@@ -86,6 +86,8 @@ declare const Accordion: OverridableComponent<AccordionTypeMap>;
 export type AccordionProps<
   RootComponent extends React.ElementType = AccordionTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<AccordionTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<AccordionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Accordion;
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts b/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts
index 35de2dfd7415ec..c015565cb62e84 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts
@@ -46,6 +46,8 @@ declare const AccordionSummary: ExtendButtonBase<AccordionSummaryTypeMap>;
 export type AccordionSummaryProps<
   RootComponent extends React.ElementType = AccordionSummaryTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<AccordionSummaryTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<AccordionSummaryTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default AccordionSummary;
diff --git a/packages/mui-material/src/AppBar/AppBar.d.ts b/packages/mui-material/src/AppBar/AppBar.d.ts
index 6a3d52c76e285b..c6bc0104e0ced0 100644
--- a/packages/mui-material/src/AppBar/AppBar.d.ts
+++ b/packages/mui-material/src/AppBar/AppBar.d.ts
@@ -64,6 +64,8 @@ declare const AppBar: OverridableComponent<AppBarTypeMap>;
 export type AppBarProps<
   RootComponent extends React.ElementType = AppBarTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<AppBarTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<AppBarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default AppBar;
diff --git a/packages/mui-material/src/Avatar/Avatar.d.ts b/packages/mui-material/src/Avatar/Avatar.d.ts
index 6b51d12a1ec5e1..2b19c9cb69c307 100644
--- a/packages/mui-material/src/Avatar/Avatar.d.ts
+++ b/packages/mui-material/src/Avatar/Avatar.d.ts
@@ -77,6 +77,8 @@ declare const Avatar: OverridableComponent<AvatarTypeMap>;
 export type AvatarProps<
   RootComponent extends React.ElementType = AvatarTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<AvatarTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<AvatarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Avatar;
diff --git a/packages/mui-material/src/Backdrop/Backdrop.d.ts b/packages/mui-material/src/Backdrop/Backdrop.d.ts
index f7e0a472fc42cb..2e0457336f11cb 100644
--- a/packages/mui-material/src/Backdrop/Backdrop.d.ts
+++ b/packages/mui-material/src/Backdrop/Backdrop.d.ts
@@ -118,6 +118,8 @@ declare const Backdrop: OverridableComponent<BackdropTypeMap>;
 export type BackdropProps<
   RootComponent extends React.ElementType = BackdropTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<BackdropTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<BackdropTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Backdrop;
diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts
index 8a94e795eec1eb..f107d7f3d33db4 100644
--- a/packages/mui-material/src/Badge/Badge.d.ts
+++ b/packages/mui-material/src/Badge/Badge.d.ts
@@ -108,6 +108,8 @@ declare const Badge: OverridableComponent<BadgeTypeMap>;
 export type BadgeProps<
   RootComponent extends React.ElementType = BadgeTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<BadgeTypeMap<RootComponent, AdditionalProps>, RootComponent>;
+> = OverrideProps<BadgeTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Badge;
diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts
index d354c52ed0aa21..3cbec3f280a31b 100644
--- a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts
+++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts
@@ -56,6 +56,8 @@ declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
 export type BottomNavigationProps<
   RootComponent extends React.ElementType = BottomNavigationTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<BottomNavigationTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<BottomNavigationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default BottomNavigation;
diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts
index 79a939d1c86d17..08d850dddbece3 100644
--- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts
+++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts
@@ -65,6 +65,8 @@ declare const BottomNavigationAction: ExtendButtonBase<
 export type BottomNavigationActionProps<
   RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<BottomNavigationActionTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<BottomNavigationActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default BottomNavigationAction;
diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts
index 636d304db8643f..9ce23f7a8c06a2 100644
--- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts
+++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts
@@ -100,6 +100,8 @@ declare const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap>;
 export type BreadcrumbsProps<
   RootComponent extends React.ElementType = BreadcrumbsTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<BreadcrumbsTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<BreadcrumbsTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Breadcrumbs;
diff --git a/packages/mui-material/src/Button/Button.d.ts b/packages/mui-material/src/Button/Button.d.ts
index df3a0cfc591514..1bd7dd18ece3d6 100644
--- a/packages/mui-material/src/Button/Button.d.ts
+++ b/packages/mui-material/src/Button/Button.d.ts
@@ -125,6 +125,8 @@ declare const Button: ExtendButtonBase<ButtonTypeMap>;
 export type ButtonProps<
   RootComponent extends React.ElementType = ButtonTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Button;
diff --git a/packages/mui-material/src/Button/Button.spec.tsx b/packages/mui-material/src/Button/Button.spec.tsx
index 1250869cfb83d9..57c051d5e2a13f 100644
--- a/packages/mui-material/src/Button/Button.spec.tsx
+++ b/packages/mui-material/src/Button/Button.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Button, { ButtonProps } from '@mui/material/Button';
+import MaterialUiLink, { LinkProps as MaterialUiLinkProps } from '@mui/material/Link';
 import { Link as ReactRouterLink, LinkProps } from 'react-router-dom';
 import { expectType } from '@mui/types';
 
@@ -9,10 +10,47 @@ const TestOverride = React.forwardRef<HTMLDivElement, { x?: number }>((props, re
   <div ref={ref} />
 ));
 
+type CustomLinkProps = MaterialUiLinkProps<typeof ReactRouterLink, LinkProps>;
+const CustomLink: React.FC<React.PropsWithChildren<CustomLinkProps>> = ({ children, ...props }) => {
+  return (
+    <MaterialUiLink component={ReactRouterLink} {...props}>
+      {children}
+    </MaterialUiLink>
+  );
+};
+
 function FakeIcon() {
   return <div>Icon</div>;
 }
 
+const props1: ButtonProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: ButtonProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLButtonElement>, typeof event>(event);
+  },
+};
+
+const props3: ButtonProps<typeof TestOverride> = {
+  component: TestOverride,
+  x: 2,
+};
+
+const props4: ButtonProps<typeof TestOverride> = {
+  component: TestOverride,
+  // @ts-expect-error TestOverride does not accept incorrectProp
+  incorrectProp: 3,
+};
+
+const props5: ButtonProps<typeof TestOverride> = {
+  component: TestOverride,
+};
+
 const buttonTest = () => (
   <div>
     <Button>I am a button!</Button>
@@ -36,6 +74,9 @@ const buttonTest = () => (
     <Button component={ReactRouterLink} to="/open-collective">
       Link
     </Button>
+    <Button component={CustomLink} to="/some-route">
+      Link
+    </Button>
     <Button href="/open-collective">Link</Button>
     {/* By default the underlying component is a button element */}
     <Button
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
index 0e4b62317265ea..6a6c256d87a48d 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
@@ -124,7 +124,9 @@ declare const ButtonBase: ExtendButtonBase<ButtonBaseTypeMap>;
 export type ButtonBaseProps<
   RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ButtonBaseTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ButtonBaseTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export interface ButtonBaseActions {
   focusVisible(): void;
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts b/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts
index 8a91ce26d5386a..458e7da7204f0b 100644
--- a/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts
+++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts
@@ -99,6 +99,8 @@ declare const ButtonGroup: OverridableComponent<ButtonGroupTypeMap>;
 export type ButtonGroupProps<
   RootComponent extends React.ElementType = ButtonGroupTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ButtonGroupTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ButtonGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ButtonGroup;
diff --git a/packages/mui-material/src/Card/Card.d.ts b/packages/mui-material/src/Card/Card.d.ts
index e0491466ddd422..a061e30d33494b 100644
--- a/packages/mui-material/src/Card/Card.d.ts
+++ b/packages/mui-material/src/Card/Card.d.ts
@@ -3,7 +3,7 @@ import { SxProps } from '@mui/system';
 import { DistributiveOmit } from '@mui/types';
 import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
 import { Theme } from '..';
-import { PaperProps } from '../Paper';
+import { PaperOwnProps } from '../Paper';
 import { CardClasses } from './cardClasses';
 
 // TODO: v6 remove this interface, it is not used
@@ -14,7 +14,7 @@ export interface CardTypeMap<
   DefaultComponent extends React.ElementType = 'div',
 > {
   props: AdditionalProps &
-    DistributiveOmit<PaperProps, 'classes'> & {
+    DistributiveOmit<PaperOwnProps, 'classes'> & {
       /**
        * Override or extend the styles applied to the component.
        */
@@ -49,6 +49,8 @@ declare const Card: OverridableComponent<CardTypeMap>;
 export type CardProps<
   RootComponent extends React.ElementType = CardTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<CardTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<CardTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Card;
diff --git a/packages/mui-material/src/Card/Card.spec.tsx b/packages/mui-material/src/Card/Card.spec.tsx
new file mode 100644
index 00000000000000..8f8d8e9e930054
--- /dev/null
+++ b/packages/mui-material/src/Card/Card.spec.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import { expectType } from '@mui/types';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+function CardTest() {
+  return (
+    <div>
+      <Card />
+      <Card elevation={4} />
+      <Card
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof event>(event);
+        }}
+      />
+      <Card
+        component="a"
+        href="test"
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLAnchorElement, MouseEvent>, typeof event>(event);
+        }}
+      />
+      <Card component="a" href="test" />
+
+      <Card component={CustomComponent} stringProp="test" numberProp={0} />
+      {/* @ts-expect-error missing stringProp and numberProp */}
+      <Card component={CustomComponent} />
+    </div>
+  );
+}
diff --git a/packages/mui-material/src/CardActionArea/CardActionArea.d.ts b/packages/mui-material/src/CardActionArea/CardActionArea.d.ts
index 1265f5371953de..3f0cbbb26215ff 100644
--- a/packages/mui-material/src/CardActionArea/CardActionArea.d.ts
+++ b/packages/mui-material/src/CardActionArea/CardActionArea.d.ts
@@ -41,6 +41,8 @@ declare const CardActionArea: ExtendButtonBase<
 export type CardActionAreaProps<
   RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<CardActionAreaTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<CardActionAreaTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default CardActionArea;
diff --git a/packages/mui-material/src/CardContent/CardContent.d.ts b/packages/mui-material/src/CardContent/CardContent.d.ts
index fb990f93ada99c..e18c8a5333e731 100644
--- a/packages/mui-material/src/CardContent/CardContent.d.ts
+++ b/packages/mui-material/src/CardContent/CardContent.d.ts
@@ -39,6 +39,8 @@ declare const CardContent: OverridableComponent<CardContentTypeMap>;
 export type CardContentProps<
   RootComponent extends React.ElementType = CardContentTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<CardContentTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<CardContentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default CardContent;
diff --git a/packages/mui-material/src/CardHeader/CardHeader.spec.tsx b/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
index 8bce33b41c52b3..55d6ad8567857f 100644
--- a/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
+++ b/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
@@ -12,18 +12,18 @@ interface ComponentProp {
   component?: React.ElementType;
 }
 
+<CardHeader component={CustomComponent} stringProp="s" numberProp={2} />;
+
 function createElementBasePropMixedTest() {
   React.createElement<CardHeaderProps<DefaultComponent, ComponentProp>>(CardHeader);
   React.createElement<CardHeaderProps<DefaultComponent, ComponentProp>>(CardHeader, {
     component: 'div',
   });
-  // ExpectError: type system should be demanding the required props of "CustomComponent"
-  React.createElement<CardHeaderProps<DefaultComponent, ComponentProp>>(CardHeader, {
+  // @ts-expect-error required props are missing
+  React.createElement<CardHeaderProps<typeof CustomComponent, ComponentProp>>(CardHeader, {
     component: CustomComponent,
   });
-  // @ts-expect-error
-  React.createElement<CardHeaderProps<DefaultComponent, ComponentProp>>(CardHeader, {
-    // This test shouldn't fail but does; stringProp & numberProp are required props of CustomComponent
+  React.createElement<CardHeaderProps<typeof CustomComponent, ComponentProp>>(CardHeader, {
     component: CustomComponent,
     stringProp: '',
     numberProp: 0,
@@ -31,19 +31,19 @@ function createElementBasePropMixedTest() {
   React.createElement<CardHeaderProps>(CardHeader, {
     disableTypography: true,
   });
-  // @ts-expect-error
+  // @ts-expect-error CardHeader does not accept unknownProp
   React.createElement<CardHeaderProps<DefaultComponent, {}, React.ElementType>>(CardHeader, {
     unknownProp: 'shouldNotWork',
   });
-  // @ts-expect-error
+  // @ts-expect-error disableTypography does not accept strings
   React.createElement<CardHeaderProps>(CardHeader, {
     disableTypography: 'hello',
   });
-  // @ts-expect-error
+  // @ts-expect-error disableTypography does not accept numbers
   React.createElement<CardHeaderProps>(CardHeader, {
     disableTypography: 1,
   });
-  // @ts-expect-error
+  // @ts-expect-error `component` is not a valid element
   React.createElement<CardHeaderProps<any, ComponentProp>>(CardHeader, {
     component: 'incorrectElement',
   });
diff --git a/packages/mui-material/src/CardMedia/CardMedia.d.ts b/packages/mui-material/src/CardMedia/CardMedia.d.ts
index ab451f2c4894cb..f776c1bfa07aaf 100644
--- a/packages/mui-material/src/CardMedia/CardMedia.d.ts
+++ b/packages/mui-material/src/CardMedia/CardMedia.d.ts
@@ -49,6 +49,8 @@ declare const CardMedia: OverridableComponent<CardMediaTypeMap<{}, 'div'>>;
 export type CardMediaProps<
   RootComponent extends React.ElementType = 'div',
   AdditionalProps = {},
-> = OverrideProps<CardMediaTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<CardMediaTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default CardMedia;
diff --git a/packages/mui-material/src/Chip/Chip.d.ts b/packages/mui-material/src/Chip/Chip.d.ts
index 005c0d164422db..686b395cf3058b 100644
--- a/packages/mui-material/src/Chip/Chip.d.ts
+++ b/packages/mui-material/src/Chip/Chip.d.ts
@@ -114,6 +114,8 @@ declare const Chip: OverridableComponent<ChipTypeMap>;
 export type ChipProps<
   RootComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ChipTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ChipTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Chip;
diff --git a/packages/mui-material/src/Container/Container.d.ts b/packages/mui-material/src/Container/Container.d.ts
index 42f72a217893a9..8bd092b7d52557 100644
--- a/packages/mui-material/src/Container/Container.d.ts
+++ b/packages/mui-material/src/Container/Container.d.ts
@@ -56,6 +56,8 @@ declare const Container: OverridableComponent<ContainerTypeMap>;
 export type ContainerProps<
   RootComponent extends React.ElementType = ContainerTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ContainerTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ContainerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Container;
diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 45fbf07fd32403..7e37f1e50058aa 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -72,7 +72,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * Determine the container for scrolling the dialog.
    * @default 'paper'
diff --git a/packages/mui-material/src/Dialog/Dialog.spec.tsx b/packages/mui-material/src/Dialog/Dialog.spec.tsx
index 50e3c59a898fde..0464e8cf8bcc33 100644
--- a/packages/mui-material/src/Dialog/Dialog.spec.tsx
+++ b/packages/mui-material/src/Dialog/Dialog.spec.tsx
@@ -1,6 +1,19 @@
 import * as React from 'react';
-import { Dialog } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
+import { PaperProps } from '@mui/material/Paper';
+import { expectType } from '@mui/types';
 
-function optionalChildrenTest() {
-  <Dialog open />;
+const paperProps: PaperProps<'span'> = {
+  component: 'span',
+  onClick: (event) => {
+    expectType<React.MouseEvent<HTMLSpanElement, MouseEvent>, typeof event>(event);
+  },
+};
+function Test() {
+  return (
+    <React.Fragment>
+      <Dialog open />;
+      <Dialog open PaperProps={paperProps} />;
+    </React.Fragment>
+  );
 }
diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.d.ts b/packages/mui-material/src/DialogContentText/DialogContentText.d.ts
index 4d1af81e1cb4d4..fae69c4d85fa22 100644
--- a/packages/mui-material/src/DialogContentText/DialogContentText.d.ts
+++ b/packages/mui-material/src/DialogContentText/DialogContentText.d.ts
@@ -38,6 +38,8 @@ declare const DialogContentText: OverridableComponent<DialogContentTextTypeMap>;
 export type DialogContentTextProps<
   RootComponent extends React.ElementType = DialogContentTextTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<DialogContentTextTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<DialogContentTextTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default DialogContentText;
diff --git a/packages/mui-material/src/DialogTitle/DialogTitle.d.ts b/packages/mui-material/src/DialogTitle/DialogTitle.d.ts
index d5e79e510a66ac..5d86c4e3129c01 100644
--- a/packages/mui-material/src/DialogTitle/DialogTitle.d.ts
+++ b/packages/mui-material/src/DialogTitle/DialogTitle.d.ts
@@ -41,6 +41,8 @@ declare const DialogTitle: OverridableComponent<DialogTitleTypeMap>;
 export type DialogTitleProps<
   RootComponent extends React.ElementType = DialogTitleTypeMap['defaultComponent'],
   AdditionalProps = { component?: React.ElementType },
-> = OverrideProps<DialogTitleTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<DialogTitleTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default DialogTitle;
diff --git a/packages/mui-material/src/Divider/Divider.d.ts b/packages/mui-material/src/Divider/Divider.d.ts
index cca574c628cf17..1b7be60ea2dcec 100644
--- a/packages/mui-material/src/Divider/Divider.d.ts
+++ b/packages/mui-material/src/Divider/Divider.d.ts
@@ -78,6 +78,8 @@ declare const Divider: OverridableComponent<DividerTypeMap>;
 export type DividerProps<
   RootComponent extends React.ElementType = DividerTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<DividerTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<DividerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Divider;
diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index c25f3390693d1a..296ca1c0545346 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -46,7 +46,7 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * Props applied to the [`Slide`](/material-ui/api/slide/) element.
    */
diff --git a/packages/mui-material/src/Drawer/Drawer.spec.tsx b/packages/mui-material/src/Drawer/Drawer.spec.tsx
new file mode 100644
index 00000000000000..8a9149262d2433
--- /dev/null
+++ b/packages/mui-material/src/Drawer/Drawer.spec.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Drawer from '@mui/material/Drawer';
+import { PaperProps } from '@mui/material/Paper';
+import { expectType } from '@mui/types';
+
+const paperProps: PaperProps<'span'> = {
+  component: 'span',
+  onClick: (event) => {
+    expectType<React.MouseEvent<HTMLSpanElement, MouseEvent>, typeof event>(event);
+  },
+};
+function Test() {
+  return (
+    <React.Fragment>
+      <Drawer open />;
+      <Drawer open PaperProps={paperProps} />;
+    </React.Fragment>
+  );
+}
diff --git a/packages/mui-material/src/Fab/Fab.d.ts b/packages/mui-material/src/Fab/Fab.d.ts
index 2edae12fff1acc..5c272fee5541c4 100644
--- a/packages/mui-material/src/Fab/Fab.d.ts
+++ b/packages/mui-material/src/Fab/Fab.d.ts
@@ -88,6 +88,8 @@ declare const Fab: ExtendButtonBase<FabTypeMap>;
 export type FabProps<
   RootComponent extends React.ElementType = FabTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<FabTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<FabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Fab;
diff --git a/packages/mui-material/src/FormControl/FormControl.d.ts b/packages/mui-material/src/FormControl/FormControl.d.ts
index bed60dcf0656a2..f3ff6f89bd990b 100644
--- a/packages/mui-material/src/FormControl/FormControl.d.ts
+++ b/packages/mui-material/src/FormControl/FormControl.d.ts
@@ -125,6 +125,8 @@ declare const FormControl: OverridableComponent<FormControlTypeMap>;
 export type FormControlProps<
   RootComponent extends React.ElementType = FormControlTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default FormControl;
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.d.ts b/packages/mui-material/src/FormHelperText/FormHelperText.d.ts
index 3c8c2baf48f260..703f00bbd7b0d1 100644
--- a/packages/mui-material/src/FormHelperText/FormHelperText.d.ts
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.d.ts
@@ -76,6 +76,8 @@ declare const FormHelperText: OverridableComponent<FormHelperTextTypeMap>;
 export type FormHelperTextProps<
   RootComponent extends React.ElementType = FormHelperTextTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<FormHelperTextTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<FormHelperTextTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default FormHelperText;
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx b/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx
new file mode 100644
index 00000000000000..5571159252a0bb
--- /dev/null
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import FormHelperText, { FormHelperTextProps } from '@mui/material/FormHelperText';
+import { expectType } from '@mui/types';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props1: FormHelperTextProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: FormHelperTextProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLParagraphElement>, typeof event>(event);
+  },
+};
+
+const props3: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props4: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error CustomComponent does not accept incorrectProp
+  incorrectProp: 3,
+};
+
+// @ts-expect-error missing props
+const props5: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
+const TestComponent = () => {
+  return (
+    <React.Fragment>
+      <FormHelperText />
+      <FormHelperText component={'a'} href="/test" />
+
+      <FormHelperText component={CustomComponent} stringProp="s" numberProp={1} />
+      {
+        // @ts-expect-error missing props
+        <FormHelperText component={CustomComponent} />
+      }
+      <FormHelperText
+        component="span"
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+        }}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/mui-material/src/FormLabel/FormLabel.d.ts b/packages/mui-material/src/FormLabel/FormLabel.d.ts
index 6190f4b27f2a73..f580b7fdeaf0cc 100644
--- a/packages/mui-material/src/FormLabel/FormLabel.d.ts
+++ b/packages/mui-material/src/FormLabel/FormLabel.d.ts
@@ -83,6 +83,8 @@ export interface ExtendFormLabelTypeMap<TypeMap extends OverridableTypeMap> {
 export type FormLabelProps<
   RootComponent extends React.ElementType = FormLabelTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<FormLabelTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<FormLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default FormLabel;
diff --git a/packages/mui-material/src/Grid/Grid.d.ts b/packages/mui-material/src/Grid/Grid.d.ts
index fcd0769acfaeae..4639d6ce4fffe7 100644
--- a/packages/mui-material/src/Grid/Grid.d.ts
+++ b/packages/mui-material/src/Grid/Grid.d.ts
@@ -171,6 +171,8 @@ declare const Grid: OverridableComponent<GridTypeMap>;
 export type GridProps<
   RootComponent extends React.ElementType = GridTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Grid;
diff --git a/packages/mui-material/src/Grid/Grid.spec.tsx b/packages/mui-material/src/Grid/Grid.spec.tsx
index 83e6063587ba69..21784a479130ab 100644
--- a/packages/mui-material/src/Grid/Grid.spec.tsx
+++ b/packages/mui-material/src/Grid/Grid.spec.tsx
@@ -1,7 +1,63 @@
 import * as React from 'react';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid, { GridProps } from '@mui/material/Grid';
+import { expectType } from '@mui/types';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props1: GridProps<'span'> = {
+  component: 'span',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+  },
+};
+
+const props2: GridProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props3: GridProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props4: GridProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error
+  incorrectProp: 3,
+};
+
+// @ts-expect-error
+const props5: GridProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
 
 function ResponsiveTest() {
-  <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square />;
+  return (
+    <React.Fragment>
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square />
+      <Grid item component={'a'} href="/test" />
+
+      <Grid item component={CustomComponent} stringProp="s" numberProp={1} />
+      {
+        // @ts-expect-error
+        <Grid item component={CustomComponent} />
+      }
+      <Grid
+        item
+        component="span"
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+        }}
+      />
+    </React.Fragment>
+  );
 }
diff --git a/packages/mui-material/src/Icon/Icon.d.ts b/packages/mui-material/src/Icon/Icon.d.ts
index 328e2f729883dc..d66a87825db304 100644
--- a/packages/mui-material/src/Icon/Icon.d.ts
+++ b/packages/mui-material/src/Icon/Icon.d.ts
@@ -77,6 +77,8 @@ declare const Icon: OverridableComponent<IconTypeMap> & { muiName: string };
 export type IconProps<
   RootComponent extends React.ElementType = IconTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<IconTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<IconTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Icon;
diff --git a/packages/mui-material/src/IconButton/IconButton.d.ts b/packages/mui-material/src/IconButton/IconButton.d.ts
index 492b2451cab6a0..a764796b81bb44 100644
--- a/packages/mui-material/src/IconButton/IconButton.d.ts
+++ b/packages/mui-material/src/IconButton/IconButton.d.ts
@@ -83,6 +83,8 @@ declare const IconButton: ExtendButtonBase<IconButtonTypeMap>;
 export type IconButtonProps<
   RootComponent extends React.ElementType = IconButtonTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<IconButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<IconButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default IconButton;
diff --git a/packages/mui-material/src/ImageList/ImageList.d.ts b/packages/mui-material/src/ImageList/ImageList.d.ts
index 337713b9762473..86a93a2a399d8b 100644
--- a/packages/mui-material/src/ImageList/ImageList.d.ts
+++ b/packages/mui-material/src/ImageList/ImageList.d.ts
@@ -65,6 +65,8 @@ declare const ImageList: OverridableComponent<ImageListTypeMap>;
 export type ImageListProps<
   RootComponent extends React.ElementType = ImageListTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ImageListTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ImageListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ImageList;
diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts
index ee9a9fa1386d0d..acce86d80b9a50 100644
--- a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts
+++ b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts
@@ -49,6 +49,8 @@ declare const ImageListItem: OverridableComponent<ImageListItemTypeMap>;
 export type ImageListItemProps<
   RootComponent extends React.ElementType = ImageListItemTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ImageListItemTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ImageListItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ImageListItem;
diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.d.ts b/packages/mui-material/src/InputAdornment/InputAdornment.d.ts
index 12e4eeaa316249..477b3436843f49 100644
--- a/packages/mui-material/src/InputAdornment/InputAdornment.d.ts
+++ b/packages/mui-material/src/InputAdornment/InputAdornment.d.ts
@@ -60,6 +60,8 @@ declare const InputAdornment: OverridableComponent<InputAdornmentTypeMap>;
 export type InputAdornmentProps<
   RootComponent extends React.ElementType = InputAdornmentTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<InputAdornmentTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<InputAdornmentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default InputAdornment;
diff --git a/packages/mui-material/src/InputLabel/InputLabel.d.ts b/packages/mui-material/src/InputLabel/InputLabel.d.ts
index 38e41bc26216e5..860db2e2d04e1f 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.d.ts
+++ b/packages/mui-material/src/InputLabel/InputLabel.d.ts
@@ -85,6 +85,8 @@ declare const InputLabel: OverridableComponent<InputLabelTypeMap>;
 export type InputLabelProps<
   RootComponent extends React.ElementType = InputLabelTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<InputLabelTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<InputLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default InputLabel;
diff --git a/packages/mui-material/src/Link/Link.d.ts b/packages/mui-material/src/Link/Link.d.ts
index 4c6790838cf32a..1851a2e609a0d0 100644
--- a/packages/mui-material/src/Link/Link.d.ts
+++ b/packages/mui-material/src/Link/Link.d.ts
@@ -3,7 +3,7 @@ import { DistributiveOmit } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '../styles';
-import { TypographyProps } from '../Typography';
+import { TypographyOwnProps } from '../Typography';
 import { LinkClasses } from './linkClasses';
 
 export interface LinkTypeMap<
@@ -11,7 +11,7 @@ export interface LinkTypeMap<
   DefaultComponent extends React.ElementType = 'a',
 > {
   props: AdditionalProps &
-    DistributiveOmit<LinkBaseProps, 'classes'> & {
+    LinkBaseProps & {
       /**
        * The content of the component.
        */
@@ -24,7 +24,7 @@ export interface LinkTypeMap<
        * The color of the link.
        * @default 'primary'
        */
-      color?: TypographyProps['color'];
+      color?: TypographyOwnProps['color'];
       /**
        * The system prop that allows defining system overrides as well as additional CSS styles.
        */
@@ -32,7 +32,7 @@ export interface LinkTypeMap<
       /**
        * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
        */
-      TypographyClasses?: TypographyProps['classes'];
+      TypographyClasses?: TypographyOwnProps['classes'];
       /**
        * Controls when the link should have an underline.
        * @default 'always'
@@ -42,7 +42,7 @@ export interface LinkTypeMap<
        * Applies the theme typography styles.
        * @default 'inherit'
        */
-      variant?: TypographyProps['variant'];
+      variant?: TypographyOwnProps['variant'];
     };
   defaultComponent: DefaultComponent;
 }
@@ -61,12 +61,16 @@ export interface LinkTypeMap<
  */
 declare const Link: OverridableComponent<LinkTypeMap>;
 
-export type LinkBaseProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> &
-  DistributiveOmit<TypographyProps, 'children' | 'component' | 'color' | 'ref' | 'variant'>;
+export type LinkBaseProps = DistributiveOmit<
+  TypographyOwnProps,
+  'children' | 'color' | 'variant' | 'classes'
+>;
 
 export type LinkProps<
   RootComponent extends React.ElementType = LinkTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<LinkTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<LinkTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Link;
diff --git a/packages/mui-material/src/Link/Link.spec.tsx b/packages/mui-material/src/Link/Link.spec.tsx
index ab9b7838c4b218..6e6a1918ab9070 100644
--- a/packages/mui-material/src/Link/Link.spec.tsx
+++ b/packages/mui-material/src/Link/Link.spec.tsx
@@ -1,7 +1,44 @@
 import * as React from 'react';
-import Link from '@mui/material/Link';
+import Link, { LinkProps } from '@mui/material/Link';
 import { expectType } from '@mui/types';
 
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props1: LinkProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: LinkProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLAnchorElement>, typeof event>(event);
+  },
+};
+
+const props3: LinkProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '1',
+  numberProp: 2,
+};
+
+const props4: LinkProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error CustomComponent does not accept incorrectProp
+  incorrectProp: 3,
+};
+
+// @ts-expect-error missing props
+const props5: LinkProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
 <Link
   ref={(elem) => {
     expectType<HTMLAnchorElement | null, typeof elem>(elem);
diff --git a/packages/mui-material/src/List/List.d.ts b/packages/mui-material/src/List/List.d.ts
index e418a2015102b9..b4e7430b798ced 100644
--- a/packages/mui-material/src/List/List.d.ts
+++ b/packages/mui-material/src/List/List.d.ts
@@ -69,6 +69,8 @@ declare const List: ExtendList<ListTypeMap>;
 export type ListProps<
   RootComponent extends React.ElementType = ListTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ListTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default List;
diff --git a/packages/mui-material/src/ListItem/ListItem.d.ts b/packages/mui-material/src/ListItem/ListItem.d.ts
index 911ea28e06a206..7ad0ae4d34f1a6 100644
--- a/packages/mui-material/src/ListItem/ListItem.d.ts
+++ b/packages/mui-material/src/ListItem/ListItem.d.ts
@@ -180,6 +180,8 @@ declare const ListItem: ExtendButtonBase<
 export type ListItemProps<
   RootComponent extends React.ElementType = 'li',
   AdditionalProps = {},
-> = OverrideProps<ListItemTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ListItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ListItem;
diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.d.ts b/packages/mui-material/src/ListItemButton/ListItemButton.d.ts
index 53529cfcb99e28..26d3addf58f8c4 100644
--- a/packages/mui-material/src/ListItemButton/ListItemButton.d.ts
+++ b/packages/mui-material/src/ListItemButton/ListItemButton.d.ts
@@ -82,6 +82,8 @@ declare const ListItemButton: ExtendButtonBase<ListItemButtonTypeMap>;
 export type ListItemButtonProps<
   RootComponent extends React.ElementType = ListItemButtonTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ListItemButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ListItemButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ListItemButton;
diff --git a/packages/mui-material/src/ListSubheader/ListSubheader.d.ts b/packages/mui-material/src/ListSubheader/ListSubheader.d.ts
index 37418f78f675a5..4c2d8f9f678b4e 100644
--- a/packages/mui-material/src/ListSubheader/ListSubheader.d.ts
+++ b/packages/mui-material/src/ListSubheader/ListSubheader.d.ts
@@ -60,6 +60,8 @@ declare const ListSubheader: OverridableComponent<ListSubheaderTypeMap>;
 export type ListSubheaderProps<
   RootComponent extends React.ElementType = ListSubheaderTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ListSubheaderTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ListSubheaderTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ListSubheader;
diff --git a/packages/mui-material/src/MenuItem/MenuItem.d.ts b/packages/mui-material/src/MenuItem/MenuItem.d.ts
index de7918f9af2241..b5395edad7c0a1 100644
--- a/packages/mui-material/src/MenuItem/MenuItem.d.ts
+++ b/packages/mui-material/src/MenuItem/MenuItem.d.ts
@@ -69,6 +69,8 @@ declare const MenuItem: ExtendButtonBase<MenuItemTypeMap>;
 export type MenuItemProps<
   RootComponent extends React.ElementType = MenuItemTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<MenuItemTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<MenuItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default MenuItem;
diff --git a/packages/mui-material/src/MenuItem/MenuItem.spec.tsx b/packages/mui-material/src/MenuItem/MenuItem.spec.tsx
new file mode 100644
index 00000000000000..1c2bc78ab02c9b
--- /dev/null
+++ b/packages/mui-material/src/MenuItem/MenuItem.spec.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
+import { expectType } from '@mui/types';
+import Link from '@mui/material/Link';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props1: MenuItemProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: MenuItemProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLLIElement>, typeof event>(event);
+  },
+};
+
+const props3: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props4: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error CustomComponent does not accept incorrectProp
+  incorrectProp: 3,
+};
+
+// @ts-expect-error missing props
+const props5: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
+const TestComponent = () => {
+  return (
+    <React.Fragment>
+      <MenuItem />
+      <MenuItem component={'a'} href="/test" />
+
+      <MenuItem component={CustomComponent} stringProp="s" numberProp={1} />
+      {
+        // @ts-expect-error missing props
+        <MenuItem component={CustomComponent} />
+      }
+      <MenuItem
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLLIElement>, typeof event>(event);
+        }}
+      />
+      <MenuItem
+        component="span"
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+        }}
+      />
+      <MenuItem component={Link} />
+    </React.Fragment>
+  );
+};
diff --git a/packages/mui-material/src/MenuList/MenuList.d.ts b/packages/mui-material/src/MenuList/MenuList.d.ts
index 5a5239d927729f..19ff9906bcb237 100644
--- a/packages/mui-material/src/MenuList/MenuList.d.ts
+++ b/packages/mui-material/src/MenuList/MenuList.d.ts
@@ -64,6 +64,8 @@ declare const MenuList: ExtendList<MenuListTypeMap>;
 export type MenuListProps<
   RootComponent extends React.ElementType = MenuListTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<MenuListTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<MenuListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default MenuList;
diff --git a/packages/mui-material/src/Modal/Modal.d.ts b/packages/mui-material/src/Modal/Modal.d.ts
index 00b51c15156cbd..a6b71f727cbae6 100644
--- a/packages/mui-material/src/Modal/Modal.d.ts
+++ b/packages/mui-material/src/Modal/Modal.d.ts
@@ -134,6 +134,8 @@ export declare const modalClasses: ModalClasses;
 export type ModalProps<
   RootComponent extends React.ElementType = ModalTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ModalTypeMap<RootComponent, AdditionalProps>, RootComponent>;
+> = OverrideProps<ModalTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Modal;
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts
index 5de18e7afd0fcf..22bf0044a0a246 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts
@@ -115,6 +115,8 @@ declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
 export type PaginationItemProps<
   RootComponent extends React.ElementType = PaginationItemTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<PaginationItemTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<PaginationItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default PaginationItem;
diff --git a/packages/mui-material/src/Paper/Paper.d.ts b/packages/mui-material/src/Paper/Paper.d.ts
index 5a924e6585d21a..79f83abe781a23 100644
--- a/packages/mui-material/src/Paper/Paper.d.ts
+++ b/packages/mui-material/src/Paper/Paper.d.ts
@@ -7,40 +7,42 @@ import { PaperClasses } from './paperClasses';
 
 export interface PaperPropsVariantOverrides {}
 
+export interface PaperOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PaperClasses>;
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 1
+   */
+  elevation?: number;
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'elevation'
+   */
+  variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;
+}
+
 export interface PaperTypeMap<
   AdditionalProps = {},
   DefaultComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<PaperClasses>;
-    /**
-     * Shadow depth, corresponds to `dp` in the spec.
-     * It accepts values between 0 and 24 inclusive.
-     * @default 1
-     */
-    elevation?: number;
-    /**
-     * If `true`, rounded corners are disabled.
-     * @default false
-     */
-    square?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'elevation'
-     */
-    variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;
-  };
+  props: AdditionalProps & PaperOwnProps;
   defaultComponent: DefaultComponent;
 }
 
@@ -65,6 +67,8 @@ export interface ExtendPaperTypeMap<TypeMap extends OverridableTypeMap, Keys ext
 export type PaperProps<
   RootComponent extends React.ElementType = PaperTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<PaperTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<PaperTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Paper;
diff --git a/packages/mui-material/src/Paper/Paper.spec.tsx b/packages/mui-material/src/Paper/Paper.spec.tsx
index d1ac34ce0d91aa..0e9abf9ea74579 100644
--- a/packages/mui-material/src/Paper/Paper.spec.tsx
+++ b/packages/mui-material/src/Paper/Paper.spec.tsx
@@ -1,11 +1,44 @@
 import * as React from 'react';
-import Paper from '@mui/material/Paper';
+import Paper, { PaperProps } from '@mui/material/Paper';
+import { expectType } from '@mui/types';
 
 const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
   function CustomComponent() {
     return <div />;
   };
 
+const props1: PaperProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: PaperProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props3: PaperProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props4: PaperProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error CustomComponent does not accept incorrectProp
+  incorrectProp: 3,
+};
+
+// @ts-expect-error missing props
+const props5: PaperProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
 function PaperTest() {
   return (
     <div>
@@ -13,7 +46,7 @@ function PaperTest() {
       <Paper component="a" href="test" />
 
       <Paper component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
+      {/* @ts-expect-error missing props */}
       <Paper component={CustomComponent} />
     </div>
   );
diff --git a/packages/mui-material/src/Paper/index.d.ts b/packages/mui-material/src/Paper/index.d.ts
index 1b44a26a195c1c..d5e8371d86ea57 100644
--- a/packages/mui-material/src/Paper/index.d.ts
+++ b/packages/mui-material/src/Paper/index.d.ts
@@ -1,5 +1,5 @@
 export { default } from './Paper';
-export type { PaperProps, PaperPropsVariantOverrides, PaperTypeMap } from './Paper';
+export type { PaperProps, PaperOwnProps, PaperPropsVariantOverrides, PaperTypeMap } from './Paper';
 
 export { default as paperClasses } from './paperClasses';
 export * from './paperClasses';
diff --git a/packages/mui-material/src/Popover/Popover.d.ts b/packages/mui-material/src/Popover/Popover.d.ts
index 3c532098b404f5..8735a0dd97b0c8 100644
--- a/packages/mui-material/src/Popover/Popover.d.ts
+++ b/packages/mui-material/src/Popover/Popover.d.ts
@@ -107,7 +107,7 @@ export interface PopoverProps
    *
    * @default {}
    */
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * The components used for each slot inside.
    *
diff --git a/packages/mui-material/src/Popover/Popover.spec.tsx b/packages/mui-material/src/Popover/Popover.spec.tsx
new file mode 100644
index 00000000000000..7fe61bc3e97d3d
--- /dev/null
+++ b/packages/mui-material/src/Popover/Popover.spec.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Popover, PaperProps } from '@mui/material';
+import { expectType } from '@mui/types';
+
+const paperProps: PaperProps<'span'> = {
+  component: 'span',
+  onClick: (event) => {
+    expectType<React.MouseEvent<HTMLSpanElement, MouseEvent>, typeof event>(event);
+  },
+};
+function Test() {
+  return (
+    <React.Fragment>
+      <Popover open />;
+      <Popover open PaperProps={paperProps} />
+    </React.Fragment>
+  );
+}
diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
index a7bc7957791b97..4a6844a67e5483 100644
--- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
+++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
@@ -45,7 +45,9 @@ declare const ScopedCssBaseline: OverridableComponent<ScopedCssBaselineTypeMap>;
 export type ScopedCssBaselineProps<
   RootComponent extends React.ElementType = ScopedCssBaselineTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ScopedCssBaselineTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ScopedCssBaselineTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 /**
  *
diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts
index 71746125e6893a..d9d23fa1b4ef71 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.d.ts
+++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts
@@ -67,6 +67,8 @@ declare const Skeleton: OverridableComponent<SkeletonTypeMap>;
 export type SkeletonProps<
   RootComponent extends React.ElementType = SkeletonTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<SkeletonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<SkeletonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Skeleton;
diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts
index 0ba9498cdd7c59..4ed6f79fa92dea 100644
--- a/packages/mui-material/src/Slider/Slider.d.ts
+++ b/packages/mui-material/src/Slider/Slider.d.ts
@@ -309,6 +309,8 @@ declare const Slider: OverridableComponent<SliderTypeMap>;
 export type SliderProps<
   RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<SliderTypeMap<RootComponent, AdditionalProps>, RootComponent>;
+> = OverrideProps<SliderTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Slider;
diff --git a/packages/mui-material/src/Stack/Stack.d.ts b/packages/mui-material/src/Stack/Stack.d.ts
index 47102acf72fe57..d0dfc9e4ad2f18 100644
--- a/packages/mui-material/src/Stack/Stack.d.ts
+++ b/packages/mui-material/src/Stack/Stack.d.ts
@@ -60,6 +60,8 @@ declare const Stack: OverridableComponent<StackTypeMap>;
 export type StackProps<
   RootComponent extends React.ElementType = StackTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Stack;
diff --git a/packages/mui-material/src/Stack/Stack.spec.tsx b/packages/mui-material/src/Stack/Stack.spec.tsx
new file mode 100644
index 00000000000000..7ad260e9e2a30f
--- /dev/null
+++ b/packages/mui-material/src/Stack/Stack.spec.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Box, { BoxProps } from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+
+const Stage: React.FC<React.PropsWithChildren<BoxProps>> = ({ children, ...props }) => {
+  return <Box {...props}>{children}</Box>;
+};
+
+export default function App() {
+  return (
+    <Stack component={Stage} spacing={2}>
+      <div />
+    </Stack>
+  );
+}
diff --git a/packages/mui-material/src/Step/Step.d.ts b/packages/mui-material/src/Step/Step.d.ts
index f9aec54b2773ad..3effa7598ebb09 100644
--- a/packages/mui-material/src/Step/Step.d.ts
+++ b/packages/mui-material/src/Step/Step.d.ts
@@ -56,7 +56,9 @@ export interface StepTypeMap<
 export type StepProps<
   RootComponent extends React.ElementType = StepTypeMap['defaultComponent'],
   AdditionalProps = { component?: React.ElementType },
-> = OverrideProps<StepTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<StepTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export type StepClasskey = keyof NonNullable<StepProps['classes']>;
 
diff --git a/packages/mui-material/src/StepButton/StepButton.d.ts b/packages/mui-material/src/StepButton/StepButton.d.ts
index 7c4fa8943a1e42..6cf99d0d9541e2 100644
--- a/packages/mui-material/src/StepButton/StepButton.d.ts
+++ b/packages/mui-material/src/StepButton/StepButton.d.ts
@@ -61,6 +61,8 @@ export type StepButtonClasskey = keyof NonNullable<StepButtonProps['classes']>;
 export type StepButtonProps<
   RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<StepButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<StepButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default StepButton;
diff --git a/packages/mui-material/src/Stepper/Stepper.d.ts b/packages/mui-material/src/Stepper/Stepper.d.ts
index ba138fb57ed45e..004f4d1c789a1b 100644
--- a/packages/mui-material/src/Stepper/Stepper.d.ts
+++ b/packages/mui-material/src/Stepper/Stepper.d.ts
@@ -59,7 +59,9 @@ export interface StepperTypeMap<
 export type StepperProps<
   RootComponent extends React.ElementType = StepperTypeMap['defaultComponent'],
   AdditionalProps = { component?: React.ElementType },
-> = OverrideProps<StepperTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<StepperTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
 
diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.d.ts b/packages/mui-material/src/SvgIcon/SvgIcon.d.ts
index 0abf39c49e7bf6..bb0e779712d57f 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.d.ts
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.d.ts
@@ -104,6 +104,8 @@ declare const SvgIcon: OverridableComponent<SvgIconTypeMap> & { muiName: string
 export type SvgIconProps<
   RootComponent extends React.ElementType = SvgIconTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<SvgIconTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<SvgIconTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default SvgIcon;
diff --git a/packages/mui-material/src/Tab/Tab.d.ts b/packages/mui-material/src/Tab/Tab.d.ts
index ea963d5ac74b02..cd3a444504deea 100644
--- a/packages/mui-material/src/Tab/Tab.d.ts
+++ b/packages/mui-material/src/Tab/Tab.d.ts
@@ -76,6 +76,8 @@ declare const Tab: ExtendButtonBase<TabTypeMap>;
 export type TabProps<
   RootComponent extends React.ElementType = TabTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TabTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Tab;
diff --git a/packages/mui-material/src/Table/Table.d.ts b/packages/mui-material/src/Table/Table.d.ts
index 31a6c3d236a027..965f71697f4873 100644
--- a/packages/mui-material/src/Table/Table.d.ts
+++ b/packages/mui-material/src/Table/Table.d.ts
@@ -59,6 +59,8 @@ declare const Table: OverridableComponent<TableTypeMap>;
 export type TableProps<
   RootComponent extends React.ElementType = TableTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TableTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TableTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Table;
diff --git a/packages/mui-material/src/TableBody/TableBody.d.ts b/packages/mui-material/src/TableBody/TableBody.d.ts
index 01d356ae634eb2..769ab25d7da0ca 100644
--- a/packages/mui-material/src/TableBody/TableBody.d.ts
+++ b/packages/mui-material/src/TableBody/TableBody.d.ts
@@ -39,6 +39,8 @@ declare const TableBody: OverridableComponent<TableBodyTypeMap>;
 export type TableBodyProps<
   RootComponent extends React.ElementType = TableBodyTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TableBodyTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TableBodyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default TableBody;
diff --git a/packages/mui-material/src/TableContainer/TableContainer.d.ts b/packages/mui-material/src/TableContainer/TableContainer.d.ts
index e4f83310670a6e..6bd3ba74d298bd 100644
--- a/packages/mui-material/src/TableContainer/TableContainer.d.ts
+++ b/packages/mui-material/src/TableContainer/TableContainer.d.ts
@@ -39,6 +39,8 @@ declare const TableContainer: OverridableComponent<TableContainerTypeMap>;
 export type TableContainerProps<
   RootComponent extends React.ElementType = TableContainerTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TableContainerTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TableContainerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default TableContainer;
diff --git a/packages/mui-material/src/TableFooter/TableFooter.d.ts b/packages/mui-material/src/TableFooter/TableFooter.d.ts
index 3c9bbe3f643ed6..8c0441f06880ec 100644
--- a/packages/mui-material/src/TableFooter/TableFooter.d.ts
+++ b/packages/mui-material/src/TableFooter/TableFooter.d.ts
@@ -39,6 +39,8 @@ declare const TableFooter: OverridableComponent<TableFooterTypeMap>;
 export type TableFooterProps<
   RootComponent extends React.ElementType = TableFooterTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TableFooterTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TableFooterTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default TableFooter;
diff --git a/packages/mui-material/src/TableHead/TableHead.d.ts b/packages/mui-material/src/TableHead/TableHead.d.ts
index 30347a509806a1..446d039775ef70 100644
--- a/packages/mui-material/src/TableHead/TableHead.d.ts
+++ b/packages/mui-material/src/TableHead/TableHead.d.ts
@@ -39,6 +39,8 @@ declare const TableHead: OverridableComponent<TableHeadTypeMap>;
 export type TableHeadProps<
   RootComponent extends React.ElementType = TableHeadTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TableHeadTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TableHeadTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default TableHead;
diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts
index 1a44b32436cde8..da219dbd120ab8 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.d.ts
+++ b/packages/mui-material/src/TablePagination/TablePagination.d.ts
@@ -148,6 +148,8 @@ export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'compone
 export type TablePaginationProps<
   RootComponent extends React.ElementType = React.JSXElementConstructor<TablePaginationBaseProps>,
   AdditionalProps = {},
-> = OverrideProps<TablePaginationTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TablePaginationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default TablePagination;
diff --git a/packages/mui-material/src/TableRow/TableRow.d.ts b/packages/mui-material/src/TableRow/TableRow.d.ts
index 4a6cb360ee1524..aa696929aa91b5 100644
--- a/packages/mui-material/src/TableRow/TableRow.d.ts
+++ b/packages/mui-material/src/TableRow/TableRow.d.ts
@@ -51,6 +51,8 @@ declare const TableRow: OverridableComponent<TableRowTypeMap>;
 export type TableRowProps<
   RootComponent extends React.ElementType = TableRowTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TableRowTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TableRowTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default TableRow;
diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts
index e65c5e5c9a15ce..2684795d4ce11e 100644
--- a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts
+++ b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts
@@ -63,6 +63,8 @@ declare const TableSortLabel: ExtendButtonBase<TableSortLabelTypeMap>;
 export type TableSortLabelProps<
   RootComponent extends React.ElementType = TableSortLabelTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TableSortLabelTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TableSortLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default TableSortLabel;
diff --git a/packages/mui-material/src/Tabs/Tabs.d.ts b/packages/mui-material/src/Tabs/Tabs.d.ts
index c723e73b0f117a..336208b9c72135 100644
--- a/packages/mui-material/src/Tabs/Tabs.d.ts
+++ b/packages/mui-material/src/Tabs/Tabs.d.ts
@@ -198,6 +198,8 @@ export interface TabsActions {
 export type TabsProps<
   RootComponent extends React.ElementType = TabsTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TabsTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TabsTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Tabs;
diff --git a/packages/mui-material/src/TextField/TextField.spec.tsx b/packages/mui-material/src/TextField/TextField.spec.tsx
index 242cb93ed188cc..2e27f5f02cad22 100644
--- a/packages/mui-material/src/TextField/TextField.spec.tsx
+++ b/packages/mui-material/src/TextField/TextField.spec.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import { expectType } from '@mui/types';
+import Typography from '@mui/material/Typography';
+import { FormHelperTextProps } from '@mui/material/FormHelperText';
 
 {
   // https://github.com/mui/material-ui/issues/12999
@@ -92,3 +94,17 @@ function FocusHandlerTest() {
 
   return null;
 }
+
+{
+  const HelperText = ({ children }: FormHelperTextProps) => (
+    <Typography component="h6">{children}</Typography>
+  );
+
+  <TextField
+    sx={{ mt: 4 }}
+    label="Enter some stuff"
+    defaultValue="Hello"
+    helperText="Hello, world!"
+    FormHelperTextProps={{ component: HelperText }}
+  />;
+}
diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts
index 6d0013018399f5..668d531471fda5 100644
--- a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts
+++ b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts
@@ -101,6 +101,8 @@ declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
 export type ToggleButtonProps<
   RootComponent extends React.ElementType = ToggleButtonTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ToggleButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ToggleButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ToggleButton;
diff --git a/packages/mui-material/src/Toolbar/Toolbar.d.ts b/packages/mui-material/src/Toolbar/Toolbar.d.ts
index 69f262a84f86a6..cb0be2b10e4a34 100644
--- a/packages/mui-material/src/Toolbar/Toolbar.d.ts
+++ b/packages/mui-material/src/Toolbar/Toolbar.d.ts
@@ -53,6 +53,8 @@ declare const Toolbar: OverridableComponent<ToolbarTypeMap>;
 export type ToolbarProps<
   RootComponent extends React.ElementType = ToolbarTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<ToolbarTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<ToolbarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Toolbar;
diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts
index ff300a25c4cda2..646847c39e0477 100644
--- a/packages/mui-material/src/Typography/Typography.d.ts
+++ b/packages/mui-material/src/Typography/Typography.d.ts
@@ -8,75 +8,76 @@ import { TypographyClasses } from './typographyClasses';
 
 export interface TypographyPropsVariantOverrides {}
 
+export interface TypographyOwnProps extends SystemProps<Theme> {
+  /**
+   * Set the text-align on the component.
+   * @default 'inherit'
+   */
+  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TypographyClasses>;
+  /**
+   * If `true`, the text will have a bottom margin.
+   * @default false
+   */
+  gutterBottom?: boolean;
+  /**
+   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+   *
+   * Note that text overflow can only happen with block or inline-block level elements
+   * (the element needs to have a width in order to overflow).
+   * @default false
+   */
+  noWrap?: boolean;
+  /**
+   * If `true`, the element will be a paragraph element.
+   * @default false
+   */
+  paragraph?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Applies the theme typography styles.
+   * @default 'body1'
+   */
+  variant?: OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>;
+  /**
+   * The component maps the variant prop to a range of different HTML element types.
+   * For instance, subtitle1 to `<h6>`.
+   * If you wish to change that mapping, you can provide your own.
+   * Alternatively, you can use the `component` prop.
+   * @default {
+   *   h1: 'h1',
+   *   h2: 'h2',
+   *   h3: 'h3',
+   *   h4: 'h4',
+   *   h5: 'h5',
+   *   h6: 'h6',
+   *   subtitle1: 'h6',
+   *   subtitle2: 'h6',
+   *   body1: 'p',
+   *   body2: 'p',
+   *   inherit: 'p',
+   * }
+   */
+  variantMapping?: Partial<
+    Record<OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>, string>
+  >;
+}
+
 export interface TypographyTypeMap<
   AdditionalProps = {},
   DefaultComponent extends React.ElementType = 'span',
 > {
-  props: AdditionalProps &
-    SystemProps<Theme> & {
-      /**
-       * Set the text-align on the component.
-       * @default 'inherit'
-       */
-      align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
-      /**
-       * The content of the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<TypographyClasses>;
-      /**
-       * If `true`, the text will have a bottom margin.
-       * @default false
-       */
-      gutterBottom?: boolean;
-      /**
-       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
-       *
-       * Note that text overflow can only happen with block or inline-block level elements
-       * (the element needs to have a width in order to overflow).
-       * @default false
-       */
-      noWrap?: boolean;
-      /**
-       * If `true`, the element will be a paragraph element.
-       * @default false
-       */
-      paragraph?: boolean;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-      /**
-       * Applies the theme typography styles.
-       * @default 'body1'
-       */
-      variant?: OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>;
-      /**
-       * The component maps the variant prop to a range of different HTML element types.
-       * For instance, subtitle1 to `<h6>`.
-       * If you wish to change that mapping, you can provide your own.
-       * Alternatively, you can use the `component` prop.
-       * @default {
-       *   h1: 'h1',
-       *   h2: 'h2',
-       *   h3: 'h3',
-       *   h4: 'h4',
-       *   h5: 'h5',
-       *   h6: 'h6',
-       *   subtitle1: 'h6',
-       *   subtitle2: 'h6',
-       *   body1: 'p',
-       *   body2: 'p',
-       *   inherit: 'p',
-       * }
-       */
-      variantMapping?: Partial<
-        Record<OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>, string>
-      >;
-    };
+  props: AdditionalProps & TypographyOwnProps;
   defaultComponent: DefaultComponent;
 }
 
@@ -96,6 +97,8 @@ declare const Typography: OverridableComponent<TypographyTypeMap>;
 export type TypographyProps<
   RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<TypographyTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+> = OverrideProps<TypographyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Typography;
diff --git a/packages/mui-material/src/Typography/typography.spec.tsx b/packages/mui-material/src/Typography/typography.spec.tsx
index cbbbeaca3a6764..0ef0026b5e37d7 100644
--- a/packages/mui-material/src/Typography/typography.spec.tsx
+++ b/packages/mui-material/src/Typography/typography.spec.tsx
@@ -1,13 +1,32 @@
 import * as React from 'react';
-import { Typography } from '@mui/material';
+import { Typography, TypographyProps } from '@mui/material';
 
 const typographyTest = () => {
   const CustomComponent: React.FC<{ prop1: string; prop2: number }> = function CustomComponent() {
     return <div />;
   };
+
+  const CustomComponent2 = ({
+    maxLines,
+    ...props
+  }: TypographyProps & {
+    maxLines?: number;
+  }): JSX.Element => {
+    return (
+      <Typography
+        {...props}
+        sx={{
+          display: maxLines === 0 ? 'block' : '-webkit-box',
+        }}
+      />
+    );
+  };
+
   return (
     <div>
       <Typography />
+      <CustomComponent2 component="span" />
+      <CustomComponent2 component="div" />
       <Typography align="inherit" color="inherit" display="block" />
       <Typography align="left" color="initial" display="inline" />
       <Typography align="right" color="primary" display="initial" />
diff --git a/packages/mui-system/src/Box/Box.d.ts b/packages/mui-system/src/Box/Box.d.ts
index 708c83b1ed6094..d4ae3c79a6dd11 100644
--- a/packages/mui-system/src/Box/Box.d.ts
+++ b/packages/mui-system/src/Box/Box.d.ts
@@ -203,6 +203,6 @@ declare const Box: OverridableComponent<BoxTypeMap>;
 export type BoxProps<
   D extends React.ElementType = BoxTypeMap['defaultComponent'],
   P = {},
-> = OverrideProps<BoxTypeMap<P, D>, D>;
+> = OverrideProps<BoxTypeMap<P, D>, D> & { component?: React.ElementType };
 
 export default Box;