No overload matches styled

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

From the example https://mui.com/components/app-bar/

import { styled } from '@mui/material/styles';
const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);

No overload matches this call.
  The last overload gave the following error.
    Argument of type '({ theme }: MUIStyledCommonProps<Theme> & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { ...; }) => CSSProperties' is not assignable to parameter of type 'TemplateStringsArray'.
      Type '({ theme }: MUIStyledCommonProps<Theme> & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { ...; }) => CSSProperties' is missing the following properties from type 'TemplateStringsArray': raw, concat, join, slice, and 9 more.ts(2769)
index.d.ts(117, 3): The last overload is declared here.

Expected behavior 🤔

Typescript should not throw error

Steps to reproduce 🕹

1. const Offset = styled(‘div’)(({ theme }) => theme.mixins.toolbar);

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

System: OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa) CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Memory: 172.19 MB / 15.50 GB Container: Yes Shell: 5.8 - /usr/bin/zsh Binaries: Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node Yarn: 1.22.17 - ~/.yarn/bin/yarn npm: 7.23.0 - ~/.nvm/versions/node/v16.9.1/bin/npm Managers: Apt: 2.0.6 - /usr/bin/apt Cargo: 1.57.0 - ~/.cargo/bin/cargo pip2: 9.0.1 - /usr/local/bin/pip2 pip3: 20.1.1 - ~/anaconda3/bin/pip3 RubyGems: 3.1.2 - /usr/bin/gem Utilities: CMake: 3.16.3 - /usr/bin/cmake Make: 4.2.1 - /usr/bin/make GCC: 9.3.0 - /usr/bin/gcc Git: 2.25.1 - /usr/bin/git Clang: 10.0.0 - /usr/bin/clang Ninja: 1.10.0 - /usr/bin/ninja Mercurial: 5.3.1 - /usr/bin/hg FFmpeg: 4.2.4 - /usr/bin/ffmpeg Virtualization: Docker: 20.10.12 - /usr/bin/docker VirtualBox: 6.1.26 - /usr/bin/vboxmanage IDEs: Android Studio: 3.6 AI-192.7142.36.36.6241897 Nano: 4.8 - /bin/nano Sublime Text: 4125 - /usr/bin/subl VSCode: 1.63.2 - /usr/bin/code Vim: 8.1 - /usr/bin/vim Languages: Bash: 5.0.17 - /bin/bash Perl: 5.30.0 - /usr/bin/perl Python: 3.8.3 - /home/someone/anaconda3/bin/python Python3: 3.8.3 - /home/someone/anaconda3/bin/python3 Ruby: 2.7.0 - /usr/bin/ruby Rust: 1.57.0 - /home/someone/.cargo/bin/rustc Databases: SQLite: 3.32.3 - /home/someone/anaconda3/bin/sqlite3 Browsers: Chrome: 97.0.4692.71 Firefox: 95.0.1

{
  "extends": "../../tsconfig.json",
  "lib": ["dom", "ESNext"],
  "include": [
    "./src/**/*",
    "./custom.d.ts"
  ]
}

{
  "extends": "./tsconfig.build.json",
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "react",
    "esModuleInterop": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules"
  ]
}

tsconfig.build.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noEmitOnError": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "types": [],
    "jsx": "react",
  },
  "lib": ["dom", "ESNext"],
  "include": [
    "./custom.d.ts"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build"
  ]
}

[vanduc1102]

it is caused of

  ...theme.mixins.toolbar,

According to this: https://stackoverflow.com/a/53329367/1681903

We can use:

 const DrawerHeader = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-end',
  padding: theme.spacing(0, 1),
  // necessary for content to be below app bar
minHeight: '64px',
}));

[dohomi]

I think this is a permanent issue also with newest TypeScript versions. I ran into this issue with using a bought theme of minimal.cc.

export const ListSubheaderStyle = styled((props) => (
  <ListSubheader disableSticky disableGutters {...props} />
))(({ theme }) => ({
  paddingTop: theme.spacing(3),
  paddingLeft: theme.spacing(2),
  paddingBottom: theme.spacing(1),
  color: theme.palette.text.primary,
  transition: theme.transitions.create('opacity', {
    duration: theme.transitions.duration.shorter
  }),
  ...theme.typography.overline
}))

My workaround to fix it is a type cast:

export const ListSubheaderStyle = styled((props) => (
  <ListSubheader disableSticky disableGutters {...props} />
))(({ theme }) => ({
  paddingTop: theme.spacing(3),
  paddingLeft: theme.spacing(2),
  paddingBottom: theme.spacing(1),
  color: theme.palette.text.primary,
  transition: theme.transitions.create('opacity', {
    duration: theme.transitions.duration.shorter
  }),
  ...theme.typography.overline as any // this causing the TS error
}))