Nesting multiple Containers will not increase the padding, will only …

…be applied once.
graphcommerce-org · Jan 16, 2025 · 32bccbb · 32bccbb
1 parent 590f064
commit 32bccbb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/hip-buckets-raise.md b/.changeset/hip-buckets-raise.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Nesting multiple Containers will not increase the padding, will only be applied once.
diff --git a/packages/next-ui/Container/Container.tsx b/packages/next-ui/Container/Container.tsx
@@ -81,6 +81,9 @@ export const Container = React.forwardRef(
             pr: !breakoutRight ? padding : undefined,
             '&.breakoutLeft': { pl: 'unset' },
             '&.breakoutRight': { pr: 'unset' },
+
+            // Nesting containers will not have padding applied.
+            '.MuiContainer-root &': { pl: 0, pr: 0 },
           },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}