Я использую Material-UI для веб-сайта React & Typescript, который я создаю. Пока все работает отлично, но у меня есть одна очень специфическая проблема c. Я пытаюсь использовать один из примеров кода, но он просто не работает с Typescript:
https://material-ui.com/components/app-bar/#fixed -placement
В частности:
const useStyles = makeStyles(theme => ({
offset: theme.mixins.toolbar,
}));
Создает следующую ошибку:
(property) Mixins.toolbar: React.CSSProperties
No overload matches this call.
Overload 1 of 2, '(style: Styles<Theme, {}, "offset">, options?: Pick<WithStylesOptions<Theme>, "link" | "meta" | "flip" | "element" | "defaultTheme" | "name" | "media" | "index" | "generateId" | "classNamePrefix"> | undefined): (props?: any) => Record<...>', gave the following error.
Argument of type '(theme: Theme) => { offset: CSSProperties; }' is not assignable to parameter of type 'Styles<Theme, {}, "offset">'.
Type '(theme: Theme) => { offset: CSSProperties; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "offset">'.
Call signature return types '{ offset: CSSProperties; }' and 'Record<"offset", CSSProperties | CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)>' are incompatible.
The types of 'offset' are incompatible between these types.
Type 'CSSProperties' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.
Type 'CSSProperties' is not assignable to type 'CreateCSSProperties<{}>'.
Index signature is missing in type 'CSSProperties'.
Overload 2 of 2, '(styles: Styles<Theme, {}, "offset">, options?: Pick<WithStylesOptions<Theme>, "link" | "meta" | "flip" | "element" | "defaultTheme" | "name" | "media" | "index" | "generateId" | "classNamePrefix"> | undefined): (props: {}) => Record<...>', gave the following error.
Argument of type '(theme: Theme) => { offset: CSSProperties; }' is not assignable to parameter of type 'Styles<Theme, {}, "offset">'.
Type '(theme: Theme) => { offset: CSSProperties; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "offset">'.ts(2769)
Я не уверен, как решить эту проблему. В документации Material-UI есть страница о Typescript, но она не дает четкого указания о том, как решить проблему, подобную этой:
https://material-ui.com/guides/typescript/#typescript