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; export type AccordionProps< RootComponent extends React.ElementType = AccordionTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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; export type AccordionSummaryProps< RootComponent extends React.ElementType = AccordionSummaryTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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; export type AppBarProps< RootComponent extends React.ElementType = AppBarTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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; export type AvatarProps< RootComponent extends React.ElementType = AvatarTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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; export type BackdropProps< RootComponent extends React.ElementType = BackdropTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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; export type BadgeProps< RootComponent extends React.ElementType = BadgeTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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; export type BottomNavigationProps< RootComponent extends React.ElementType = BottomNavigationTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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, RootComponent>; +> = OverrideProps, 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; export type BreadcrumbsProps< RootComponent extends React.ElementType = BreadcrumbsTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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; export type ButtonProps< RootComponent extends React.ElementType = ButtonTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent>; +> = OverrideProps, 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((props, re
)); +type CustomLinkProps = MaterialUiLinkProps; +const CustomLink: React.FC> = ({ children, ...props }) => { + return ( + + {children} + + ); +}; + function FakeIcon() { return
Icon
; } +const props1: ButtonProps<'div'> = { + component: 'div', + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props2: ButtonProps = { + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props3: ButtonProps = { + component: TestOverride, + x: 2, +}; + +const props4: ButtonProps = { + component: TestOverride, + // @ts-expect-error TestOverride does not accept incorrectProp + incorrectProp: 3, +}; + +const props5: ButtonProps = { + component: TestOverride, +}; + const buttonTest = () => (
@@ -36,6 +74,9 @@ const buttonTest = () => ( + {/* By default the underlying component is a button element */}