use ReadonlyArray

Author: siriwatknp

packages/mui-styled-engine/src/index.d.ts

@@ -35,7 +35,7 @@ export interface SerializedStyles {
 
 export type CSSProperties = CSS.PropertiesFallback<number | string>;
 export type CSSPropertiesWithMultiValues = {
-  [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>>;
+  [K in keyof CSSProperties]: CSSProperties[K] | ReadonlyArray<Extract<CSSProperties[K], string>>;
 };
 
 // TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
@@ -49,7 +49,7 @@ export interface CSSOthersObject {
 }
 export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject };
 
-export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {}
+export interface ArrayCSSInterpolation extends ReadonlyArray<CSSInterpolation> {}
 
 export interface CSSOthersObjectForCSSObject {
   [propertiesName: string]: CSSInterpolation;
@@ -98,7 +98,7 @@ export interface FunctionInterpolation<Props> {
   (props: Props): Interpolation<Props>;
 }
 
-export interface ArrayInterpolation<Props> extends Array<Interpolation<Props>> {}
+export interface ArrayInterpolation<Props> extends ReadonlyArray<Interpolation<Props>> {}
 
 export type Interpolation<Props> =
   | InterpolationPrimitive

packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts

@@ -9,7 +9,7 @@ import { OverwriteCSSProperties } from './OverwriteCSSProperties';
  * Note that this extends to non-theme values also. For example `display=['none', 'block']`
  * will also works.
  */
-export type ResponsiveStyleValue<T> = T | Array<T | null> | { [key: string]: T | null };
+export type ResponsiveStyleValue<T> = T | ReadonlyArray<T | null> | { [key: string]: T | null };
 
 /**
  * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...).