wip

mnajdova · Dec 22, 2023 · b8992fa · b8992fa
1 parent d534dd5
commit b8992fa
Showing 1 changed file with 29 additions and 18 deletions.
diff --git 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', {