CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
Scribbler
Scribbler

Reputation: 105

Material-UI theme.mixins.toolbar not working with Typescript

I am using Material-UI for a React & Typescript web site I am building. It's been working great so far, but I have one very specific problem. I am attempting to use one of the code examples, but it just does not seem to work with Typescript:

https://material-ui.com/components/app-bar/#fixed-placement

Specifically:

const useStyles = makeStyles(theme => ({
    offset: theme.mixins.toolbar,
}));

Generates the following error:

(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)

I'm not sure how to resolve this. In the Material-UI documentation they have a page about Typescript, but it does not provide clear direction about how to solve a problem like this:

https://material-ui.com/guides/typescript/#typescript

Upvotes: 1

Views: 4090

Answers (1)

Sebastian
Sebastian

Reputation: 3594

Should be fixed in the next release. See https://github.com/mui-org/material-ui/issues/19362

Upvotes: 1

Related Questions