I am encountering an issue with a typescript error related to the MUI sx prop. The problem arises when I attempt to merge or spread multiple sx values into an sx prop, resulting in an error. It seems to work fine if only one item is present in the sx prop, and it also works when spreading a single item within the sx prop. However, any attempts to include more than one item trigger the error.
Here is the error message:
No overload matches this call.
Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>): Element', gave the following error.
Type '{} | { clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<ClipPath | ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 810 more ...; displayPrint?: SystemStyleObject<...> | ... 1 more ... | ((theme: Theme) => ResponsiveStyleValue<...>); } | ... 33 more ... | { ...; }' is not assignable to type 'SxProps<Theme> | undefined'.
Type '{ clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<Property.ClipPath | Property.ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 843 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to type 'SxProps<Theme> | undefined'.
Type '{ clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<Property.ClipPath | Property.ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 843 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to type 'undefined'.
Overload 2 of 2, '(props: DefaultComponentProps<BoxTypeMap<{}, "div">>): Element', gave the following error.
Type '{} | { clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<ClipPath | ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 810 more ...; displayPrint?: SystemStyleObject<...> | ... 1 more ... | ((theme: Theme) => ResponsiveStyleValue<...>); } | ... 33 more ... | { ...; }' is not assignable to type 'SxProps<Theme> | undefined'.
Type '{ clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<Property.ClipPath | Property.ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 843 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to type 'SxProps<Theme> | undefined'.
Type '{ clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<Property.ClipPath | Property.ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 843 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to type 'undefined'.ts(2769)
Box.d.ts(11, 7): The expected type comes from property 'sx' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & SystemProps<Theme> & { children?: ReactNode; component?: ElementType<...> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>'
Box.d.ts(11, 7): The expected type comes from property 'sx' which is declared here on type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>'
Code snippet:
<Box sx={{ ...formElementHolderStyled, ...formGroupStyled }}>
<FormElements cardID={cardID} config={edit} />
</Box>
SX values used:
export const formGroupStyled: SxProps<Theme> = {
flexDirection: 'row',
alignItems: 'flex-start',
width: 1,
pb: 3,
'&:last-child': {
pb: 0,
},
};
export const formElementHolderStyled: SxProps<Theme> = {
display: 'inline-flex',
flexBasis: 370,
'.MuiFormControl-root': { width: 1 },
};