TypeScript types for sx prop spreading broken

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The docs recommend receiving and passing down the sx prop to a MUI component by spreading an array. https://mui.com/system/the-sx-prop/#passing-sx-prop

Instead of doing ...(Array.isArray(sx) ? sx : [sx]) everywhere, as recommended in the docs, I’m using a generic & type-safe helper function for that (The above approach is not type safe because of isArray is not generic: isArray(arg: any): arg is any[];).

function castToArray<T>(oneOrMultipleElements: T | T[]): T[] {
  return Array.isArray(oneOrMultipleElements) ? oneOrMultipleElements : [oneOrMultipleElements];
}

const foo = castToArray([3, 4]); // => type number[]
const bar = castToArray(4); // => type number[]

Trying to use this with some MUI component like this, does not work though!

const sxArray = sx ? castToArray(sx) : [];
// ⬆️ TS SHOWS for above:
/*
TS2345: Argument of type 'SystemCssProperties<Theme> | CSSPseudoSelectorProps<Theme> |
 CSSSelectorObjectOrCssVariables<Theme> | ((theme: Theme) => SystemStyleObject<...>) | 
readonly (boolean | ... 1 more ... | ((theme: Theme) => SystemStyleObject<...>))[]' is not assignable
 to parameter of type 'Fill | Fill[] | (Fill | Fill[] | null | undefined)[] | null | undefined'.   Type 'SystemCssProperties<Theme>'
 is not assignable to type 'Fill | Fill[] | (Fill | Fill[] | null | undefined)[] | null | undefined'.     Type 
'SystemCssProperties<Theme>' is missing the following properties from type '(Fill | Fill[] | null | undefined)[]': length, pop, push, concat, and 27 more.
*/

return (
  <Alert
    sx={[...sxArray, { "& .MuiAlert-message": { whiteSpace: "normal" } } ]}
    variant="standard"
    >
    <AlertTitle>{title}</AlertTitle>
  </Alert>
);

// ⬆️ TS SHOWS for above:
/*
TS2322: Type '(Fill | Fill[] | null | undefined)[]' is not assignable to type 'SxProps<Theme> | undefined'.
   Type '(Fill | Fill[] | null | undefined)[]' is not assignable to type 
'CSSSelectorObjectOrCssVariables<Theme>'.     Index signature for type 'string' is missing in 
type '(Fill | Fill[] | null | undefined)[]'.
*/

Expected behavior 🤔

TS should not report an error.

Steps to reproduce 🕹

Link to TS Reproduction

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 11.6.6
    CPU: (8) arm64 Apple M1
    Memory: 80.06 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  Managers:
    Homebrew: 3.4.11 - /opt/homebrew/bin/brew
    pip3: 22.1.1 - ~/.pyenv/shims/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.32.0 - /usr/bin/git
    Clang: 13.0.0 - /usr/bin/clang
  Servers:
    Apache: 2.4.53 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.14 - /usr/local/bin/docker
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.2 - /usr/bin/vim
    WebStorm: 2022.1
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Go: 1.18.2 - /opt/homebrew/bin/go
    Perl: 5.30.2 - /usr/bin/perl
    PHP: 7.3.29 - /usr/bin/php
    Python: 3.10.3 - /Users/nickluger/.pyenv/shims/python
    Python3: 3.10.3 - /Users/nickluger/.pyenv/shims/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.32.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 100.0.2
    Safari: 15.5

[nickluger]

Ok, never mind. It’s not that important for us, there’s still any. 😄

[IsaiahByDayah]

I wonder if its because SxProps<Theme> can actually be an object, an array, or a function according to inspecting the types of it: