[Avatar] fix TypeScript error on imgProps.sx (#30255)

mui · Dec 28, 2021 · 98c9aad · 98c9aad
1 parent 737ec06
commit 98c9aad
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/mui-material/src/Avatar/Avatar.d.ts b/packages/mui-material/src/Avatar/Avatar.d.ts
@@ -27,7 +27,9 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
      * It can be used to listen for the loading error event.
      */
-    imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
+    imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
+      sx?: SxProps<Theme>;
+    };
     /**
      * The `sizes` attribute for the `img` element.
      */

diff --git a/packages/mui-material/src/Avatar/Avatar.spec.tsx b/packages/mui-material/src/Avatar/Avatar.spec.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+
+function ImgPropsShouldSupportSx() {
+  <Avatar imgProps={{ sx: { objectFit: 'contain' } }} />;
+}