[@mantine/core] Container: Fix nested Container components inheriting…

… some properties from parent Container component (#4859)
mantinedev · Oct 2, 2023 · afed439 · afed439
1 parent 8d7e55c
commit afed439
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/mantine-core/src/components/Container/Container.module.css b/src/mantine-core/src/components/Container/Container.module.css
@@ -8,11 +8,11 @@
 
   padding-left: var(--mantine-spacing-md);
   padding-right: var(--mantine-spacing-md);
-  max-width: var(--_container-size, var(--container-size));
+  max-width: var(--container-size);
   margin-left: auto;
   margin-right: auto;
 
   &[data-fluid] {
-    --_container-size: 100%;
+    --container-size: 100%;
   }
 }
diff --git a/src/mantine-core/src/components/Container/Container.story.tsx b/src/mantine-core/src/components/Container/Container.story.tsx
@@ -36,3 +36,13 @@ export function Usage() {
     </MantineThemeProvider>
   );
 }
+
+export function NonFluidWithinFluid() {
+  return (
+    <Container fluid h={50} bg="blue">
+      <Container h={50} bg="red">
+        Child container
+      </Container>
+    </Container>
+  );
+}
diff --git a/src/mantine-core/src/components/Container/Container.tsx b/src/mantine-core/src/components/Container/Container.tsx
@@ -39,9 +39,9 @@ export type ContainerFactory = Factory<{
 
 const defaultProps: Partial<ContainerProps> = {};
 
-const varsResolver = createVarsResolver<ContainerFactory>((_, { size }) => ({
+const varsResolver = createVarsResolver<ContainerFactory>((_, { size, fluid }) => ({
   root: {
-    '--container-size': getSize(size, 'container-size'),
+    '--container-size': fluid ? undefined : getSize(size, 'container-size'),
   },
 }));