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 параметр?

Answer 1

Пытаетесь ли вы использовать определения типа styled-components с примером API-интерфейса styled-components из Material-UI? Хотя они выглядят одинаково, это два разных проекта, и они работают несовместимо; styled-components использует строковый литерал шаблона, а Material-UI использует литерал объекта. Выберите один или другой. (Пример Material-UI определен в JavaScript без аннотаций типов, но вы можете использовать его без указания типа. Тип параметра theme просто Theme из @material-ui/core.)