TypeScript types for sx prop spreading broken
See original GitHub issueDuplicates
- 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 🕹
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
Issue Analytics
- State:
- Created a year ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
MUI 5 SX Typescript error when spreading values in prop
Another solution is to cast the spread sx object with SxProps<Theme> . <Box sx={{ ...formElementHolderStyled, .
Read more >React + Typescript: broken completion for functional ...
FunctionComponent) completion after <Link only shows to , activeClassName and children , all they have any type.
Read more >The Ultimate Guide to the MUI 'sx' Prop - Smart Devpreneur
In each section below I'll break down the different aspects of the styling code in the sx props of these TextFields.
Read more >Releases - styled-components
Only major versions have the potential to introduce breaking changes (noted in ... styled-components is now written in TypeScript and ships its own...
Read more >@material-ui/types | Yarn - Package Manager
Material-UI Types - Utility types for Material-UI. ... Several MUI Base components were converted to TypeScript by @trizotti, @leventdeniz and @danhuynhdev ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ok, never mind. It’s not that important for us, there’s still
any
. 😄I wonder if its because
SxProps<Theme>
can actually be an object, an array, or a function according to inspecting the types of it: