Typescript error when using the Type "SlotProps" #46031
Description
Steps to reproduce
Background: we try to utilize the utilities slots function provided in material library, to setup the control level components.
Steps:
- please check the live example and look at typescript error
https://codesandbox.io/p/devbox/mui-slots-forward-ref-type-issue-forked-qyl7t9?file=%2Findex.tsx%3A61%2C30&workspaceId=ws_XjwBjMe1qQqiwHMeyBFRCJ
Type '{ slotProps: { root?: SlotProps<React.ElementType<PaperProps<"div", {}>, keyof React.JSX.IntrinsicElements>, object, CardHeaderProps> | undefined; }; slots: Partial<...> | undefined; }' is not assignable to type '{ component?: ElementType<any, keyof IntrinsicElements> | undefined; slots?: { root?: ElementType<any, keyof IntrinsicElements> | undefined; } | undefined; slotProps?: { ...; } | undefined; }'. The types of 'slotProps.root' are incompatible between these types. Type 'SlotProps<ElementType<PaperProps<"div", {}>, keyof IntrinsicElements>, object, CardHeaderProps> | undefined' is not assignable to type '{ component?: ElementType<any, keyof IntrinsicElements> | undefined; ref?: Ref<any> | undefined; } | ((ownerState: { slots?: Partial<{ root: ElementType<any, keyof IntrinsicElements>; }> | undefined; slotProps?: { ...; } | undefined; sx?: SxProps<...> | undefined; }) => { ...; }) | undefined'. Type 'Partial<Omit<PaperOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; }, "style" | ... 6 more ... | "variant"> & { ...; }, "ref"> & RefAttributes<...>> & SlotCommonProps & object' is not assignable to type '{ component?: ElementType<any, keyof IntrinsicElements> | undefined; ref?: Ref<any> | undefined; } | ((ownerState: { slots?: Partial<{ root: ElementType<any, keyof IntrinsicElements>; }> | undefined; slotProps?: { ...; } | undefined; sx?: SxProps<...> | undefined; }) => { ...; }) | undefined'. Type 'Partial<Omit<PaperOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; }, "style" | ... 6 more ... | "variant"> & { ...; }, "ref"> & RefAttributes<...>> & SlotCommonProps & object' is not assignable to type '{ component?: ElementType<any, keyof IntrinsicElements> | undefined; ref?: Ref<any> | undefined; }'. Types of property 'ref' are incompatible. **Type 'LegacyRef<Component<PaperProps<"div", {}>, any, any>> | undefined' is not assignable to type 'Ref<any> | undefined'.** Type 'string' is not assignable to type 'Ref<any> | undefined'.typescript(2322) useSlot.d.ts(65, 5): The expected type comes from property 'externalForwardedProps' which is declared here on type '{ ref: ForwardedRef<any>; } & { className: ClassValue | ClassValue[]; elementType: StyledComponent<MUIStyledCommonProps<Theme> & { ...; }, Pick<...>, {}>; ... 4 more ...; internalForwardedProps?: any; }'
I believe the error come with the conflict of useSlot and SlotProps, which contain LegacyRef and Ref
Current behavior
No response
Expected behavior
No response
Context
No response
Your environment
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: SlotProps typescript