diff --git a/.changeset/two-peas-exercise.md b/.changeset/two-peas-exercise.md
new file mode 100644
index 00000000000..12b7ce69853
--- /dev/null
+++ b/.changeset/two-peas-exercise.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix AvatarStack opacity for children without sx prop
diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx
index e97063f6f00..a0224062dc1 100644
--- a/src/AvatarStack.tsx
+++ b/src/AvatarStack.tsx
@@ -20,7 +20,6 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     height: 20px;
     width: 20px;
     box-shadow: 0 0 0 1px ${get('colors.canvas.default')};
-    margin-left: -11px;
     position: relative;
     overflow: hidden;
     transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
@@ -28,55 +27,60 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
 
     &:first-child {
       margin-left: 0;
+      z-index: 10;
     }
+
+    &:nth-child(n + 2) {
+      margin-left: -11px;
+      z-index: 9;
+    }
+
+    &:nth-child(n + 3) {
+      margin-left: -17px;
+      opacity: ${100 - 3 * 15}%;
+      z-index: 8;
+    }
+
     &:nth-child(n + 4) {
-      display: none;
+      opacity: ${100 - 4 * 15}%;
+      z-index: 7;
+    }
+
+    &:nth-child(n + 5) {
+      opacity: ${100 - 5 * 15}%;
+      z-index: 6;
+    }
+
+    &:nth-child(n + 6) {
+      opacity: 0;
+      visibility: hidden;
     }
   }
 
   &.pc-AvatarStack--two {
     min-width: 30px;
-    .pc-AvatarItem {
-      &:nth-child(n + 3) {
-        display: none;
-      }
-    }
   }
 
   &.pc-AvatarStack--three-plus {
     min-width: 38px;
-    .pc-AvatarItem {
-      &:nth-child(3) {
-        opacity: ${100 - 3 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(4) {
-        opacity: ${100 - 4 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(5) {
-        opacity: ${100 - 5 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(n + 4) {
-        display: block;
-      }
-      &:nth-child(n + 6) {
-        opacity: 0;
-        visibility: hidden;
-      }
-    }
   }
 
   &.pc-AvatarStack--right {
     justify-content: flex-end;
     .pc-AvatarItem {
       margin-left: 0 !important;
-      margin-right: -11px;
 
       &:first-child {
         margin-right: 0;
       }
+
+      &:nth-child(n + 2) {
+        margin-right: -11px;
+      }
+
+      &:nth-child(n + 3) {
+        margin-right: -17px;
+      }
     }
 
     .pc-AvatarStackBody {
@@ -95,20 +99,6 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     }
   }
 
-  &.pc-AvatarStack--three-plus.pc-AvatarStack--right {
-    .pc-AvatarItem {
-      &:nth-child(3) {
-        margin-right: -17px;
-      }
-      &:nth-child(4) {
-        margin-right: -17px;
-      }
-      &:nth-child(5) {
-        margin-right: -17px;
-      }
-    }
-  }
-
   .pc-AvatarStackBody:hover {
     width: auto;
 
@@ -126,11 +116,11 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
   ${sx};
 `
 const transformChildren = (children: React.ReactNode) => {
-  return React.Children.map(children, (child, index) => {
+  return React.Children.map(children, child => {
     if (!React.isValidElement(child)) return child
     return React.cloneElement(child, {
-      className: classnames(child.props.className, 'pc-AvatarItem'),
-      sx: {zIndex: 10 - index, ...child.props.sx}
+      ...child.props,
+      className: classnames(child.props.className, 'pc-AvatarItem')
     })
   })
 }
diff --git a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
index 1ad913e36db..0dd78a0d56e 100644
--- a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
@@ -27,7 +27,6 @@ exports[`Avatar renders consistently 1`] = `
   height: 20px;
   width: 20px;
   box-shadow: 0 0 0 1px #ffffff;
-  margin-left: -11px;
   position: relative;
   overflow: hidden;
   -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
@@ -36,48 +35,43 @@ exports[`Avatar renders consistently 1`] = `
 
 .c0 .pc-AvatarItem:first-child {
   margin-left: 0;
+  z-index: 10;
 }
 
-.c0 .pc-AvatarItem:nth-child(n + 4) {
-  display: none;
-}
-
-.c0.pc-AvatarStack--two {
-  min-width: 30px;
-}
-
-.c0.pc-AvatarStack--two .pc-AvatarItem:nth-child(n + 3) {
-  display: none;
-}
-
-.c0.pc-AvatarStack--three-plus {
-  min-width: 38px;
+.c0 .pc-AvatarItem:nth-child(n + 2) {
+  margin-left: -11px;
+  z-index: 9;
 }
 
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(3) {
-  opacity: 55%;
+.c0 .pc-AvatarItem:nth-child(n + 3) {
   margin-left: -17px;
+  opacity: 55%;
+  z-index: 8;
 }
 
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(4) {
+.c0 .pc-AvatarItem:nth-child(n + 4) {
   opacity: 40%;
-  margin-left: -17px;
+  z-index: 7;
 }
 
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(5) {
+.c0 .pc-AvatarItem:nth-child(n + 5) {
   opacity: 25%;
-  margin-left: -17px;
-}
-
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(n + 4) {
-  display: block;
+  z-index: 6;
 }
 
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(n + 6) {
+.c0 .pc-AvatarItem:nth-child(n + 6) {
   opacity: 0;
   visibility: hidden;
 }
 
+.c0.pc-AvatarStack--two {
+  min-width: 30px;
+}
+
+.c0.pc-AvatarStack--three-plus {
+  min-width: 38px;
+}
+
 .c0.pc-AvatarStack--right {
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
@@ -87,13 +81,20 @@ exports[`Avatar renders consistently 1`] = `
 
 .c0.pc-AvatarStack--right .pc-AvatarItem {
   margin-left: 0 !important;
-  margin-right: -11px;
 }
 
 .c0.pc-AvatarStack--right .pc-AvatarItem:first-child {
   margin-right: 0;
 }
 
+.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 2) {
+  margin-right: -11px;
+}
+
+.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 3) {
+  margin-right: -17px;
+}
+
 .c0.pc-AvatarStack--right .pc-AvatarStackBody {
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
@@ -109,18 +110,6 @@ exports[`Avatar renders consistently 1`] = `
   margin-right: 0 !important;
 }
 
-.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(3) {
-  margin-right: -17px;
-}
-
-.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(4) {
-  margin-right: -17px;
-}
-
-.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(5) {
-  margin-right: -17px;
-}
-
 .c0 .pc-AvatarStackBody:hover {
   width: auto;
 }
@@ -148,41 +137,21 @@ exports[`Avatar renders consistently 1`] = `
       alt=""
       className="pc-AvatarItem"
       src="https://avatars.githubusercontent.com/primer"
-      sx={
-        Object {
-          "zIndex": 10,
-        }
-      }
     />
     <img
       alt=""
       className="pc-AvatarItem"
       src="https://avatars.githubusercontent.com/github"
-      sx={
-        Object {
-          "zIndex": 9,
-        }
-      }
     />
     <img
       alt=""
       className="pc-AvatarItem"
       src="https://avatars.githubusercontent.com/primer"
-      sx={
-        Object {
-          "zIndex": 8,
-        }
-      }
     />
     <img
       alt=""
       className="pc-AvatarItem"
       src="https://avatars.githubusercontent.com/github"
-      sx={
-        Object {
-          "zIndex": 7,
-        }
-      }
     />
   </div>
 </span>
@@ -215,7 +184,6 @@ exports[`Avatar respects alignRight props 1`] = `
   height: 20px;
   width: 20px;
   box-shadow: 0 0 0 1px #ffffff;
-  margin-left: -11px;
   position: relative;
   overflow: hidden;
   -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
@@ -224,48 +192,43 @@ exports[`Avatar respects alignRight props 1`] = `
 
 .c0 .pc-AvatarItem:first-child {
   margin-left: 0;
+  z-index: 10;
 }
 
-.c0 .pc-AvatarItem:nth-child(n + 4) {
-  display: none;
-}
-
-.c0.pc-AvatarStack--two {
-  min-width: 30px;
-}
-
-.c0.pc-AvatarStack--two .pc-AvatarItem:nth-child(n + 3) {
-  display: none;
-}
-
-.c0.pc-AvatarStack--three-plus {
-  min-width: 38px;
+.c0 .pc-AvatarItem:nth-child(n + 2) {
+  margin-left: -11px;
+  z-index: 9;
 }
 
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(3) {
-  opacity: 55%;
+.c0 .pc-AvatarItem:nth-child(n + 3) {
   margin-left: -17px;
+  opacity: 55%;
+  z-index: 8;
 }
 
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(4) {
+.c0 .pc-AvatarItem:nth-child(n + 4) {
   opacity: 40%;
-  margin-left: -17px;
+  z-index: 7;
 }
 
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(5) {
+.c0 .pc-AvatarItem:nth-child(n + 5) {
   opacity: 25%;
-  margin-left: -17px;
-}
-
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(n + 4) {
-  display: block;
+  z-index: 6;
 }
 
-.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(n + 6) {
+.c0 .pc-AvatarItem:nth-child(n + 6) {
   opacity: 0;
   visibility: hidden;
 }
 
+.c0.pc-AvatarStack--two {
+  min-width: 30px;
+}
+
+.c0.pc-AvatarStack--three-plus {
+  min-width: 38px;
+}
+
 .c0.pc-AvatarStack--right {
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
@@ -275,13 +238,20 @@ exports[`Avatar respects alignRight props 1`] = `
 
 .c0.pc-AvatarStack--right .pc-AvatarItem {
   margin-left: 0 !important;
-  margin-right: -11px;
 }
 
 .c0.pc-AvatarStack--right .pc-AvatarItem:first-child {
   margin-right: 0;
 }
 
+.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 2) {
+  margin-right: -11px;
+}
+
+.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 3) {
+  margin-right: -17px;
+}
+
 .c0.pc-AvatarStack--right .pc-AvatarStackBody {
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
@@ -297,18 +267,6 @@ exports[`Avatar respects alignRight props 1`] = `
   margin-right: 0 !important;
 }
 
-.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(3) {
-  margin-right: -17px;
-}
-
-.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(4) {
-  margin-right: -17px;
-}
-
-.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(5) {
-  margin-right: -17px;
-}
-
 .c0 .pc-AvatarStackBody:hover {
   width: auto;
 }
@@ -336,41 +294,21 @@ exports[`Avatar respects alignRight props 1`] = `
       alt=""
       className="pc-AvatarItem"
       src="https://avatars.githubusercontent.com/primer"
-      sx={
-        Object {
-          "zIndex": 10,
-        }
-      }
     />
     <img
       alt=""
       className="pc-AvatarItem"
       src="https://avatars.githubusercontent.com/github"
-      sx={
-        Object {
-          "zIndex": 9,
-        }
-      }
     />
     <img
       alt=""
       className="pc-AvatarItem"
       src="https://avatars.githubusercontent.com/primer"
-      sx={
-        Object {
-          "zIndex": 8,
-        }
-      }
     />
     <img
       alt=""
       className="pc-AvatarItem"
       src="https://avatars.githubusercontent.com/github"
-      sx={
-        Object {
-          "zIndex": 7,
-        }
-      }
     />
   </div>
 </span>