问题
Edit: This was a bug in the typing of 4.8.x, upgrade to 4.9.0+ to fix the issue.
On version 4.8.0, the following code compiles and runs fine:
<DialogContent>
{/* use a span so we can nest div, p, etc. */}
<DialogContentText component="span">
{confirmContent}
</DialogContentText>
</DialogContent>
After upgrading to 4.8.1 the code now fails type-checking with:
No overload matches this call.
Overload 1 of 2, '(props: DialogContentTextProps, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, a
ny, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
Type '{ children: Element; component: string; }' is not assignable to type 'IntrinsicAttributes & DialogContentTextProps'.
Property 'component' does not exist on type 'IntrinsicAttributes & DialogContentTextProps'.
Overload 2 of 2, '(props: PropsWithChildren<DialogContentTextProps>, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any)
=> Component<...>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
Type '{ children: Element; component: string; }' is not assignable to type 'IntrinsicAttributes & DialogContentTextProps & { children?: ReactNode; }'.
Property 'component' does not exist on type 'IntrinsicAttributes & DialogContentTextProps & { children?: ReactNode; }'. TS2769
I can get my project compiling again by deleting the component="span" part - but what's the proper fix?
What's the new way to specify way to specify the base component used by DialogContentText?
My project is a standard create-react-app setup, using Typescript 3.7.4.
回答1:
This is a bug with the typings in material-ui, see: https://github.com/mui-org/material-ui/issues/19068
Fixed in 4.9.0
来源：https://stackoverflow.com/questions/59494907/material-ui-4-8-1-api-change-new-way-to-specify-the-component-property