diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml
index 0df1319ac41672..ecd3a0782023dc 100644
--- a/apps/pnpm-lock.yaml
+++ b/apps/pnpm-lock.yaml
@@ -1374,13 +1374,13 @@ importers:
         version: file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
       '@mui/icons-material':
         specifier: file:../../packages/mui-icons-material/build
-        version: file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0)
+        version: file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0)
       '@mui/material':
         specifier: file:../../packages/mui-material/build
         version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
       '@mui/material-nextjs':
         specifier: file:../../packages/mui-material-nextjs/build
-        version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0)
+        version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.13)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0)
       '@mui/system':
         specifier: file:../../packages/mui-system/build
         version: file:../packages/mui-system/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0)
@@ -1432,7 +1432,7 @@ importers:
         version: file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
       '@mui/icons-material':
         specifier: file:../../packages/mui-icons-material/build
-        version: file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0)
+        version: file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0)
       '@mui/material':
         specifier: file:../../packages/mui-material/build
         version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
@@ -8991,7 +8991,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0):
+  file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0):
     resolution: {directory: ../packages/mui-icons-material/build, type: directory}
     id: file:../packages/mui-icons-material/build
     name: '@mui/icons-material'
@@ -9010,7 +9010,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0):
+  file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.13)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0):
     resolution: {directory: ../packages/mui-material-nextjs/build, type: directory}
     id: file:../packages/mui-material-nextjs/build
     name: '@mui/material-nextjs'
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
index 84babf704c59e8..1f6221e06a02ab 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -5,16 +5,17 @@ import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
 
 const SPACINGS = {
   small: -16,
-  medium: null,
+  medium: -8,
 };
 
+const useThemeProps = createUseThemeProps('MuiAlert');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -33,25 +34,18 @@ const AvatarGroupRoot = styled('div', {
     [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
     ...styles.root,
   }),
-})(({ theme, ownerState }) => {
-  const marginValue =
-    ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined
-      ? SPACINGS[ownerState.spacing]
-      : -ownerState.spacing;
-
-  return {
-    [`& .${avatarClasses.root}`]: {
-      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-      boxSizing: 'content-box',
-      marginLeft: marginValue ?? -8,
-      '&:last-child': {
-        marginLeft: 0,
-      },
+})(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  [`& .${avatarClasses.root}`]: {
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
+    boxSizing: 'content-box',
+    marginLeft: 'var(--AvatarGroup-spacing, -8px)',
+    '&:last-child': {
+      marginLeft: 0,
     },
-    display: 'flex',
-    flexDirection: 'row-reverse',
-  };
-});
+  },
+}));
 
 const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const props = useThemeProps({
@@ -113,6 +107,11 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
 
   const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
 
+  const marginValue =
+    ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined
+      ? SPACINGS[ownerState.spacing]
+      : -ownerState.spacing || -8;
+
   return (
     <AvatarGroupRoot
       as={component}
@@ -126,6 +125,10 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
           variant={variant}
           {...additionalAvatarSlotProps}
           className={clsx(classes.avatar, additionalAvatarSlotProps?.className)}
+          style={{
+            '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
+            ...other.style,
+          }}
         >
           {extraAvatarsElement}
         </Avatar>
@@ -215,6 +218,10 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
    * @default 'medium'
    */
   spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */