[Grid2] Fix theme scoping error (#44599)

mui · Dec 3, 2024 · 9b49147 · 9b49147
1 parent ea60388
commit 9b49147
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/packages/mui-material/src/Grid2/Grid2.test.js b/packages/mui-material/src/Grid2/Grid2.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import Grid2, { grid2Classes as classes } from '@mui/material/Grid2';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, THEME_ID } from '@mui/material/styles';
 import { expect } from 'chai';
 import describeConformance from '../../test/describeConformance';
 
@@ -23,6 +23,19 @@ describe('<Grid2 />', () => {
     skip: ['componentsProp', 'classesRoot'],
   }));
 
+  it('should not crash with theme scoping', () => {
+    expect(() =>
+      render(
+        <ThemeProvider theme={{ [THEME_ID]: createTheme() }}>
+          <Grid2 container spacing={2}>
+            <Grid2 size={{ xs: 12, md: 6 }}>6</Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }}>6</Grid2>
+          </Grid2>
+        </ThemeProvider>,
+      ),
+    ).not.throw();
+  });
+
   it('should render with the container class', () => {
     render(<Grid2 data-testid="grid" container />);
     expect(screen.getByTestId('grid')).to.have.class(classes.container);

diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx
@@ -6,6 +6,7 @@ import { OverridableComponent, OverrideProps } from '@mui/types';
 import requirePropFactory from '../utils/requirePropFactory';
 import { Theme, styled, Breakpoint } from '../styles';
 import { useDefaultProps } from '../DefaultPropsProvider';
+import useTheme from '../styles/useTheme';
 
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 
@@ -134,6 +135,7 @@ const Grid2 = createGrid2({
   }),
   componentName: 'MuiGrid2',
   useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }),
+  useTheme,
 }) as OverridableComponent<Grid2TypeMap>;
 
 Grid2.propTypes /* remove-proptypes */ = {

diff --git a/packages/mui-system/src/Grid/createGrid.tsx b/packages/mui-system/src/Grid/createGrid.tsx
@@ -7,7 +7,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
 import systemStyled from '../styled';
 import useThemePropsSystem from '../useThemeProps';
-import useTheme from '../useTheme';
+import useThemeSystem from '../useTheme';
 import { extendSxProp } from '../styleFunctionSx';
 import createTheme, { Breakpoint, Breakpoints } from '../createTheme';
 import {
@@ -46,13 +46,15 @@ export default function createGrid(
   options: {
     createStyledComponent?: typeof defaultCreateStyledComponent;
     useThemeProps?: typeof useThemePropsDefault;
+    useTheme?: typeof useThemeSystem;
     componentName?: string;
   } = {},
 ) {
   const {
     // This will allow adding custom styled fn (for example for custom sx style function)
     createStyledComponent = defaultCreateStyledComponent,
     useThemeProps = useThemePropsDefault,
+    useTheme = useThemeSystem,
     componentName = 'MuiGrid',
   } = options;