MUI 5 sx 无法与打字稿正常工作？

Question

简单的问题。为什么这个有效：

const heroText = {
  height: 400,
  display: "flex",
  justifyContent: "center",
}

<Grid item sx={heroText}>Some text</Grid>

这会给你 Typescript 错误（“没有重载与此调用匹配。”）：

const heroText = {
  height: 400,
  display: "flex",
  justifyContent: "center",
  flexDirection: "column",
}

<Grid item sx={heroText}>Some text</Grid>

如果你不相信我只添加flexDirection: "column"会产生 Typescript 错误，你可以自己尝试一下。

我正在使用新的 MUI 5、React 和 Typescript。

Answer 1

您可以使用const assertion将值转换为对象文字。这将防止每个属性的值被加宽（例如，显示的类型"flex"不是string的有效值display）：

const heroText = {
  height: 400,
  display: "flex",
  justifyContent: "center",
} as const

另一个解决方案是声明SxProp类型，这有点长，但具有在设置值时为您提供智能感知的优点：

import { SxProps } from '@mui/system';

const sx: SxProps = {
  height: 400,
  display: 'flex',
  justifyContent: 'center',
  flexDirection: 'column',
};

Answer 2

flexDirection您的heroText对象的推断类型是，string但sxprop 期望更具体的内容（“column”|“column-reverse”|“row”|“row-reverse”的字符串联合，等等...）

这里的首选解决方案可能是添加一个类型heroText：

const heroText: SxProps = {
  height: 400,
  display: "flex",
  justifyContent: "center",
  flexDirection: "column",
}

<Grid item sx={heroText}>Some text</Grid>

flexDirection另一种解决方案可能是为with断言更具体的类型as const

const heroText = {
  height: 400,
  display: "flex",
  justifyContent: "center",
  flexDirection: "column" as const,
}

<Grid item sx={heroText}>Some text</Grid>