Typescript-此表达式不可在MUI上调用

Question

我正在现有项目上添加TypeScript。

我被困在这里了：旧代码：

<Box style={{ ...styledBox(isCurrentUser) }}>

===
export const styledBox = ({ isCurrentUser }) => {
return {
display: "flex",
flexDirection: isCurrentUser ? "row-reverse" : "row",
zIndex: -1,
};
};

新代码：

<Box sx={{...styledBox(isCurrentUser) }}>

===
import { SxProps } from "@mui/system";
interface StyledBoxType {
isCurrentUser: boolean;
}
export const styledBox: SxProps<StyledBoxType> = ({
isCurrentUser,
}) => {
return {
display: "flex",
flexDirection: isCurrentUser ? "row-reverse" : "row",
zIndex: -1,
};
};

一开始它不接受sx。现在一切都好了。然而，...styledBox的销毁仍然存在错误

它说：此表达式不可调用。

Not all constituents of type 'SystemCssProperties<StyledBoxType> | CSSPseudoSelectorProps<StyledBoxType> | CSSSelectorObject<StyledBoxType> | ((theme: StyledBoxType) => SystemStyleObject<...>) | (boolean | ... 1 more ... | ((theme: StyledBoxType) => SystemStyleObject<...>))[]' are callable.
Type 'SystemCssProperties<StyledBoxType>' has no call signatures.ts(2349)
Cannot invoke an object which is possibly 'null'.ts(2721)
(alias) const styledBox: SxProps<StyledBoxType>
import styledBox

有人能帮我理解并纠正这个错误吗？

编辑：

正如评论中所建议的那样，我将其更改为：

export const styledBox: (props: StyledBoxType) => SxProps = ({
isCurrentUser,
}) => {
return {
display: "flex",
flexDirection: isCurrentUser ? "row-reverse" : "row",
zIndex: -1,
};
};

然而，现在对齐的是这里的参数isCurrentUser：<Box sx={{ ...styledBox(isCurrentUser) }}>：类型为"boolean"的参数不可分配给类型为"StyledBoxType"的参数。ts(2345(

Answer 1

尝试

<Box sx={{
display: "flex",
flexDirection: isCurrentUser ? "row-reverse" : "row",
zIndex: -1,
}}>

类型"SystemCssProperties"没有调用签名

这告诉我这必须在不调用另一个函数的情况下进行内联。假设您仍然希望使用SxProps<StyledBoxType>类型。