[styles] Typescript error when using `theme.mixins.toolbar` in styled component

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When trying to create a toolbar offset component using styled components and the theme mixin, the TypeScript compiler is giving a “not assignable” error:

import { styled } from '@material-ui/core/styles';

const ToolbarOffest = styled('div')(({ theme }) => ({
  ...theme.mixins.toolbar,
}));

Argument of type '({ theme }: { theme: Theme; }) => { [x: string]: unknown; '@font-face'?: JSSFontface | JSSFontface[] | undefined; alignContent?: string | undefined; alignItems?: string | undefined; ... 762 more ...; vectorEffect?: "inherit" | ... 6 more ... | undefined; }' is not assignable to parameter of type 'CreateCSSProperties<{}> | ((props: { theme: Theme; }) => CreateCSSProperties<{}>)'.
  Type '({ theme }: { theme: Theme; }) => { [x: string]: unknown; '@font-face'?: JSSFontface | JSSFontface[] | undefined; alignContent?: string | undefined; alignItems?: string | undefined; ... 762 more ...; vectorEffect?: "inherit" | ... 6 more ... | undefined; }' is not assignable to type '(props: { theme: Theme; }) => CreateCSSProperties<{}>'.
    Type '{ [x: string]: unknown; '@font-face'?: JSSFontface | JSSFontface[] | undefined; alignContent?: string | undefined; alignItems?: string | undefined; alignSelf?: string | undefined; ... 761 more ...; vectorEffect?: "inherit" | ... 6 more ... | undefined; }' is not assignable to type 'CreateCSSProperties<{}>'.
      Index signatures are incompatible.
        Type 'unknown' is not assignable to type 'string | number | CreateCSSProperties<{}> | JSSFontface | JSSFontface[] | PropsFunc<{}, string | undefined> | ... 117 more ... | undefined'.
          Type 'unknown' is not assignable to type 'PropsFunc<{}, "menu" | "inherit" | "none" | "initial" | "default" | "-moz-initial" | "revert" | "unset" | "sheet" | "tooltip" | undefined>'.  TS2345

Expected Behavior 🤔

I believe this code should compile and work without any modifications.

Steps to Reproduce 🕹

Codesandbox with error and workarounds

Steps:

1. Create a styled component with theme enabled.
2. Spread the theme.mixins.toolbar mixin in the return object.

Context 🔦

This really isn’t a breaking issue and there are several ways around it, I just figured I’d bring it to your attention.

I’ve found that casting the mixin as BaseCSSProperties allows the code to work:

import { styled } from '@material-ui/core/styles';
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';

export const ToolbarOffest = styled('div')(({ theme }) => ({
  ...(theme.mixins.toolbar as BaseCSSProperties),
}));

I’ve also noticed adding another CSSProperties value to the returned object allows the code to work:

import { styled } from '@material-ui/core/styles';

export const ToolbarOffest = styled('div')(({ theme }) => ({
  ...theme.mixins.toolbar,
  backgroundColor: 'inherit',
}));

I was looking into it more and it seems to me that the CreateCSSProperties interface definition is not accepting CSSProperties because it extends off of BaseCreateCSSProperties which only checks the BaseCSSProperties keys, but I could be wrong on this.

Hopefully the information helps.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v16.13.1
Browser	Chrome v84.0.4147.105
TypeScript	3.9.7

[get6]

@get6 I can’t spot any issues in https://codesandbox.io/s/xomtj?file=/demo.tsx Please share a reproduction where the error is shown.

First of all, thank you for giving me a reply.

I solved the problem thanks to you.

It looks like the settings are messed up.

I solved it by deleting node_modules folder and yarn.lock file.

[bhairavee23]

This looks to be another item no one is working on, I’ll take it up then