From b8992fa64ecb55511f8b043d0f411712d190a331 Mon Sep 17 00:00:00 2001
From: mnajdova <mnajdova@gmail.com>
Date: Fri, 22 Dec 2023 14:43:41 +0100
Subject: [PATCH] wip

---
 packages/mui-material/src/Avatar/Avatar.js | 47 +++++++++++++---------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
index e20b5afcce024b..2e516e85b96678 100644
--- a/packages/mui-material/src/Avatar/Avatar.js
+++ b/packages/mui-material/src/Avatar/Avatar.js
@@ -32,7 +32,7 @@ const AvatarRoot = styled('div', {
       ownerState.colorDefault && styles.colorDefault,
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
@@ -46,23 +46,34 @@ const AvatarRoot = styled('div', {
   borderRadius: '50%',
   overflow: 'hidden',
   userSelect: 'none',
-  ...(ownerState.variant === 'rounded' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-  }),
-  ...(ownerState.variant === 'square' && {
-    borderRadius: 0,
-  }),
-  ...(ownerState.colorDefault && {
-    color: (theme.vars || theme).palette.background.default,
-    ...(theme.vars
-      ? {
-          backgroundColor: theme.vars.palette.Avatar.defaultBg,
-        }
-      : {
-          backgroundColor:
-            theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
-        }),
-  }),
+  variants: [
+    {
+      props: { variant: 'rounded' },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+      }
+    },
+    {
+      props: { variant: 'square' },
+      style: {
+        borderRadius: 0,
+      }
+    },
+    {
+      props: { colorDefault: true },
+      style: {
+        color: (theme.vars || theme).palette.background.default,
+        ...(theme.vars
+          ? {
+              backgroundColor: theme.vars.palette.Avatar.defaultBg,
+            }
+          : {
+              backgroundColor:
+                theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
+            }),
+      }
+    }
+  ],
 }));
 
 const AvatarImg = styled('img', {