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参数有哪种类型？

Answer 1

您是否要在Material-UI中将styled-components type definitions与“样式组件API”示例一起使用？尽管它们看起来很相似，但这是两个不同的项目，它们无法兼容。 styled-components使用模板字符串文字，而Material-UI使用对象文字。选择一个或另一个。（Material-UI example是在JavaScript中定义的，没有类型注释，但是您可以不带类型注释地使用它。theme参数的类型只是Theme中的@material-ui/core。）

Material-UI（React）：使用StyledComponents和TypeScript的访问主题导致类型错误

1 个答案: