在道具中传播值时 MUI 5 SX Typescript 错误答案

【问题标题】：MUI 5 SX Typescript error when spreading values in prop在道具中传播值时 MUI 5 SX Typescript 错误
【发布时间】：2022-10-15 16:08:30
【问题描述】：

我需要一些关于 MUI sx 道具的打字稿错误的帮助。当我尝试将 sx 值组合或传播到 sx 道具中时，我收到此错误。如果我只在 sx 道具中做一件事情，我就会工作。如果我在 sx 道具中散布单个项目，它也可以工作，但如果我尝试超过一个，它会引发错误。

错误：

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<...>'

我的代码

<Box sx={{ ...formElementHolderStyled, ...formGroupStyled }}>
  <FormElements cardID={cardID} config={edit} />
</Box>

我的 SX 价值观

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 },
};

【问题讨论】：

标签： typescript material-ui

【解决方案1】：

看起来这有效https://mui.com/system/the-sx-prop/#passing-sx-prop

<Box sx={[  ...(Array.isArray(formGroupStyled) ? formGroupStyled : [formGroupStyled]), ...(Array.isArray(formGroupStyled) ? formGroupStyled : [formGroupStyled]) ]}>
  <FormElements cardID={cardID} config={edit} />
</Box>

【讨论】：

【解决方案2】：

OP的解决方案将起作用。

另一种解决方案是使用SxProps<Theme> 投射sx 对象。

<Box sx={{ ...formElementHolderStyled, ...formGroupStyled } as SxProps<Theme>}>
  <FormElements cardID={cardID} config={edit} />
</Box>

【讨论】：