为什么 sx 道具类型检查失败？

Question

我正在尝试在 React 应用中使用基于 sx prop 的样式。°

我想通过所谓的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";
        }
      }
    }}
  >

Answer 2

这对我有用：

import { SxProps } from '@mui/system';
import { Theme } from '@mui/material/styles';

const style: SxProps<Theme> = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '100%',
  maxWidth: 900,
  bgcolor: 'background.paper',
  border: '1px solid #a7a7a7',
  boxShadow: 24,
  p: 4,
}

...

<Box sx={style}>