[material-ui][InputBase] Add sx type to input , root slot (#39569)

mui · Nov 2, 2023 · a1cc186 · a1cc186
1 parent d886129
commit a1cc186
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/packages/mui-material/src/InputBase/InputBase.d.ts b/packages/mui-material/src/InputBase/InputBase.d.ts
@@ -209,8 +209,10 @@ export interface InputBaseProps
    * @default {}
    */
   slotProps?: {
-    root?: React.HTMLAttributes<HTMLDivElement> & InputBaseComponentsPropsOverrides;
-    input?: React.InputHTMLAttributes<HTMLInputElement> & InputBaseComponentsPropsOverrides;
+    root?: React.HTMLAttributes<HTMLDivElement> &
+      InputBaseComponentsPropsOverrides & { sx?: SxProps<Theme> };
+    input?: React.InputHTMLAttributes<HTMLInputElement> &
+      InputBaseComponentsPropsOverrides & { sx?: SxProps<Theme> };
   };
   /**
    * The components used for each slot inside.

diff --git a/packages/mui-material/src/InputBase/InputBase.spec.tsx b/packages/mui-material/src/InputBase/InputBase.spec.tsx
@@ -7,3 +7,19 @@ import InputBase from '@mui/material/InputBase';
     expectType<React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, typeof event>(event);
   }}
 />;
+
+// Tests presence of `sx` prop on input and root slot
+<InputBase
+  slotProps={{
+    input: {
+      sx: {
+        background: 'white',
+      },
+    },
+    root: {
+      sx: {
+        background: 'black',
+      },
+    },
+  }}
+/>;