From 45425f9858bce82a3f9ee6a0e6b0c9b4d5ff41d4 Mon Sep 17 00:00:00 2001 From: Maksym Date: Thu, 3 Sep 2026 15:22:43 +0300 Subject: [PATCH 1/2] Updated PassingSxProp.js example for better compatibility with TypeScript When we use `...(Array.isArray(sx) ? sx : [sx]),` example with TypeScript we got an ESLint error: `Unsafe spread of an any value in an array. (@typescript-eslint/no-unsafe-assignment)` See issue https://github.com/mui/material-ui/issues/37730 Solution with `.flat()` eliminates this problem. Signed-off-by: Maksym --- .../system/getting-started/the-sx-prop/PassingSxProp.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/system/getting-started/the-sx-prop/PassingSxProp.js b/docs/data/system/getting-started/the-sx-prop/PassingSxProp.js index c4a488312da4f3..53ad7a875bb778 100644 --- a/docs/data/system/getting-started/the-sx-prop/PassingSxProp.js +++ b/docs/data/system/getting-started/the-sx-prop/PassingSxProp.js @@ -11,9 +11,9 @@ function ListHeader({ sx = [], children }) { width: 'auto', textDecoration: 'underline', }, - // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array. - ...(Array.isArray(sx) ? sx : [sx]), - ]} + // SxProps (typeof sx) can be an array so we use the `.flat()` array method, which inlines `sx` whether it is a single style or an array of styles. + sx, + ].flat()} > {children} From 4a556fc8309a6abe0d90559c1fc424bfe7f0459d Mon Sep 17 00:00:00 2001 From: Maksym Date: Thu, 3 Sep 2026 16:01:54 +0300 Subject: [PATCH 2/2] Update PassingSxProp.tsx Signed-off-by: Maksym --- .../system/getting-started/the-sx-prop/PassingSxProp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/system/getting-started/the-sx-prop/PassingSxProp.tsx b/docs/data/system/getting-started/the-sx-prop/PassingSxProp.tsx index 5976a03fbf22ac..a21b0109b843b4 100644 --- a/docs/data/system/getting-started/the-sx-prop/PassingSxProp.tsx +++ b/docs/data/system/getting-started/the-sx-prop/PassingSxProp.tsx @@ -16,9 +16,9 @@ function ListHeader({ sx = [], children }: ListHeaderProps) { width: 'auto', textDecoration: 'underline', }, - // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array. - ...(Array.isArray(sx) ? sx : [sx]), - ]} + // SxProps (typeof sx) can be an array so we use the `.flat()` array method, which inlines `sx` whether it is a single style or an array of styles. + sx, + ].flat()} > {children}