[Avatar] Fix ownerState usage with styleOverrides when fallback is us…

…ed (#36228)
mui · Feb 17, 2023 · 358cd5d · 358cd5d
1 parent 74b2721
commit 358cd5d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
@@ -176,7 +176,7 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
   } else if (hasImg && alt) {
     children = alt[0];
   } else {
-    children = <AvatarFallback className={classes.fallback} />;
+    children = <AvatarFallback ownerState={ownerState} className={classes.fallback} />;
   }
 
   return (

diff --git a/packages/mui-material/src/Avatar/Avatar.test.js b/packages/mui-material/src/Avatar/Avatar.test.js
@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { createRenderer, fireEvent, describeConformance } from 'test/utils';
 import { spy } from 'sinon';
 import Avatar, { avatarClasses as classes } from '@mui/material/Avatar';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CancelIcon from '../internal/svg-icons/Cancel';
 
 describe('<Avatar />', () => {
@@ -212,4 +213,28 @@ describe('<Avatar />', () => {
       expect(avatar).to.have.class(classes.colorDefault);
     });
   });
+
+  it('should not throw error when ownerState is used in styleOverrides', () => {
+    const theme = createTheme({
+      components: {
+        MuiAvatar: {
+          styleOverrides: {
+            root: ({ ownerState }) => ({
+              ...(ownerState.variant === 'rounded' && {
+                color: 'red',
+              }),
+            }),
+          },
+        },
+      },
+    });
+
+    expect(() =>
+      render(
+        <ThemeProvider theme={theme}>
+          <Avatar variant="rounded" />
+        </ThemeProvider>,
+      ),
+    ).not.to.throw();
+  });
 });