material-ui: [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:

Create a styled component with theme enabled.
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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 15 (11 by maintainers)

Most upvoted comments

@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.

get6 on Nov 18, 2021

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

bhairavee23 on Apr 6, 2021

A reproduction with v5: https://codesandbox.io/s/hopeful-vaughan-cgn54?file=/src/Demo.tsx. We should be able to do when the migration is more advanced.

diff --git a/packages/material-ui/src/styles/createMixins.d.ts b/packages/material-ui/src/styles/createMixins.d.ts
index ea163cc76e..0e749e20d6 100644
--- a/packages/material-ui/src/styles/createMixins.d.ts
+++ b/packages/material-ui/src/styles/createMixins.d.ts
@@ -1,9 +1,9 @@
 import { Breakpoints } from './createBreakpoints';
 import { Spacing } from './createSpacing';
-import { CSSProperties } from './withStyles';
+import { CSSObject } from './experimentalStyled';

 export interface Mixins {
-  toolbar: CSSProperties;
+  toolbar: CSSObject;
   // ... use interface declaration merging to add custom mixins
 }

diff --git a/packages/material-ui/src/styles/createMixins.spec.ts b/packages/material-ui/src/styles/createMixins.spec.ts
index 0564d0fdab..9b5b081108 100644
--- a/packages/material-ui/src/styles/createMixins.spec.ts
+++ b/packages/material-ui/src/styles/createMixins.spec.ts
@@ -1,29 +1,20 @@
-import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
+import { createMuiTheme, makeStyles, experimentalStyled as styled } from '@material-ui/core/styles';

-{
-  const theme = createMuiTheme({
-    mixins: {
-      toolbar: {
-        background: '#fff',
-        minHeight: 36,
-        '@media (min-width:0px) and (orientation: landscape)': {
-          minHeight: 24,
-        },
-        '@media (min-width:600px)': {
-          minHeight: 48,
-        },
+const theme = createMuiTheme({
+  mixins: {
+    toolbar: {
+      background: '#fff',
+      minHeight: 36,
+      '@media (min-width:0px) and (orientation: landscape)': {
+        minHeight: 24,
+      },
+      '@media (min-width:600px)': {
+        minHeight: 48,
       },
     },
-  });
+  },
+});

-  const useStyles = makeStyles((theme) => ({
-    appBarSpacer: theme.mixins.toolbar,
-    toolbarIcon: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      padding: '0 8px',
-      ...theme.mixins.toolbar,
-    },
-  }));
-}
+const ToolbarOffsetError = styled("div")(({ theme }) => ({
+  ...theme.mixins.toolbar,
+}));

oliviertassinari on Nov 11, 2020

I’m using "@mui/material": "^5.1.1", version.

I copied DrawerHeader code at Persistent-drawer.

...theme.mixins.toolbar occurs this error “No overload matched this call.”

get6 on Nov 18, 2021

After updating @mui/material from 5.0.4 to 5.0.6 I’ve faced this issue again. Could it be reopened?

Please share a reproduction if this is the case.

Thanks! I’ve tried but I can’t. Looks like this is my internal issue, will dig in it, sorry. - Here is working demo with 5.1.0 in case somebody will doubt in it… https://codesandbox.io/s/icy-sky-f65d7?file=/src/App.tsx

vadimshvetsov on Nov 15, 2021

I believe the typography is another story as the typings are different - https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTypography.d.ts#L45, but I agree that the demos should be updated when we do these changes.

mnajdova on Apr 1, 2021

When we work on this. I think that we should clean up all the demos, the type casing shouldn’t be necessary, e.g

https://github.com/mui-org/material-ui/blob/293b579ab1dc22770921e57d1e5a51f9b90bbec0/docs/src/pages/components/menus/CustomizedMenus.tsx#L41

oliviertassinari on Apr 1, 2021