MUI 5 sx 无法与 typescript 一起正常工作？答案

【问题标题】：MUI 5 sx not working correctly with typescript?MUI 5 sx 无法与 typescript 一起正常工作？
【发布时间】：2021-11-16 17:40:20
【问题描述】：

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

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

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

这个会给你打字稿错误（“没有重载匹配这个调用。”）：

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

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

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

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

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

flexDirection 在您的 heroText 对象上的推断类型是 string 但 sx 属性期待更具体的内容（“column” | “column-reverse” | “row” | “行反转”等...）

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

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

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

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

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

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

【讨论】：

嗨亚伦，感谢您的回答。我已经在 Material UI 网站上找到了第二个解决方案（“as const”），这实际上解决了 Typescript 的问题，但现在我收到“编译失败”错误。现在我在谷歌上搜索如何修复这个新错误。
作为 StackOverflow 的新手，这是一个很好的答案@aaron-becker！

【解决方案2】：

您可以使用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',
};

【讨论】：

谢谢。这样可行！ :)