Material-UI（React）：使用StyledComponents和TypeScript的访问主题导致Type-Error

Question

我只是尝试使用我的样式组件访问主题，如：

const ToolbarPlaceholder = styled('div')((theme: any) => ({
   minHeight: theme.mixins.toolbar.minHeight,
}));

我从文档中得到了这个：https://material-ui.com/customization/css-in-js/#styled-components-api-15-lines-（在页面的末尾）

但我得到以下类型错误：

Argument of type '(theme: any) => { minHeight: any; }' is not assignable to parameter of type 'TemplateStringsArray'.
  Property 'raw' is missing in type '(theme: any) => { minHeight: any; }'.

缺什么？ theme param有哪种类型？

Answer 1

您是否尝试将styled-components type definitions与Material-UI中的“样式组件API”示例一起使用？虽然它们看起来很相似，但它们是两个不同的项目，它们的工作方式不相符; styled-components使用模板字符串文字，Material-UI使用对象文字。选择其中一个。 （Material-UI example在没有类型注释的JavaScript中定义，但你可以使用它无类型.theme参数的类型只是来自Theme的@material-ui/core。）