为什么sx属性类型检查失败？

Question

我正在尝试在React应用程序中使用sx prop-based样式。

我想通过所谓的theme getter访问主题。

当我尝试使用这种方法时，我可以看到样式在浏览器中呈现正常。然而，TypeScript抱怨道，我发现理解类型祖先并弄清楚它在说什么是一件具有挑战性的事情。

Working沙箱

Not working沙箱

​

​

完全错误：

No overload matches this call.
  Overload 2 of 2, '(props: DefaultComponentProps<BoxTypeMap<{}, "div">>): Element', gave the following error.
    Type 'string' is not assignable to type 'SystemStyleObject<Theme>'.
  Overload 2 of 2, '(props: DefaultComponentProps<BoxTypeMap<{}, "div">>): Element', gave the following error.
    Type '(theme: any) => { border: string; }' is not assignable to type 'SystemStyleObject<Theme>'.
      Type '(theme: any) => { border: string; }' is not assignable to type 'CSSSelectorObject<Theme>'.ts(2769)
app.tsx(8, 22): Did you mean to call this expression?

可能相关的GH讨论1，2

大概我应该显式地设置SystemStyleObject，但是不确定从哪里导入它。如有任何建议，我们将不胜感激。

°应用程序使用TypeScript 4.4.1-rc + MUI 5.0.0-beta.4

Answer 1

打字的方式。主题化函数只能应用于CSS样式，而不能应用于类。您可以将其向下移动到边界，如下所示：

  <Box
    sx={{
      border: "1px solid red",
      ".some-child": {
        border: (theme) => {
          return "1px solid green";
        }
      }
    }}
  >