From b5360a698752abde8360e5e5ddd80bd09b5396d1 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 21 Feb 2024 11:32:11 +0100
Subject: [PATCH] [core] Fix missing context display names (#41168)

---
 .../mui-base/src/Unstable_Popup/PopupContext.ts    |  4 ++++
 .../mui-base/src/useCompound/useCompoundParent.ts  |  4 +++-
 .../mui-base/src/useDropdown/DropdownContext.ts    |  4 ++++
 packages/mui-base/src/useList/ListContext.ts       |  1 +
 .../src/useTransition/TransitionContext.ts         |  4 ++++
 .../mui-base/src/utils/ClassNameConfigurator.tsx   |  4 ++++
 packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx   |  4 ++++
 packages/mui-joy/src/Chip/ChipContext.ts           |  4 ++++
 .../mui-joy/src/FormControl/FormControlContext.ts  |  4 ++++
 packages/mui-joy/src/List/ComponentListContext.ts  |  4 ++++
 packages/mui-joy/src/List/GroupListContext.ts      |  4 ++++
 packages/mui-joy/src/List/NestedListContext.ts     |  4 ++++
 packages/mui-joy/src/List/RowListContext.ts        |  4 ++++
 packages/mui-joy/src/List/WrapListContext.ts       |  4 ++++
 packages/mui-joy/src/ListItem/ListItem.tsx         |  6 +++---
 .../ListItemButtonOrientationContext.ts            |  4 ++++
 .../src/ListSubheader/ListSubheader.test.tsx       |  6 +++---
 .../mui-joy/src/ListSubheader/ListSubheader.tsx    |  4 ++--
 .../src/ListSubheader/ListSubheaderContext.ts      |  8 ++++++--
 packages/mui-joy/src/Modal/CloseModalContext.ts    |  4 ++++
 .../src/ModalDialog/ModalDialogSizeContext.ts      |  4 ++++
 .../ModalDialog/ModalDialogVariantColorContext.ts  |  4 ++++
 packages/mui-joy/src/Tabs/SizeTabsContext.ts       |  4 ++++
 .../ToggleButtonGroup/ToggleButtonGroupContext.tsx |  4 ++++
 packages/mui-joy/src/Typography/Typography.tsx     |  8 ++++++++
 .../mui-joy/src/styles/variantColorInheritance.tsx |  4 ++++
 .../mui-material-next/src/Tabs/TabsListContext.js  |  4 ++++
 .../mui-system/src/Unstable_Grid/createGrid.tsx    | 14 ++++++++++----
 .../src/cssVars/createCssVarsProvider.js           |  4 ++++
 29 files changed, 120 insertions(+), 15 deletions(-)

diff --git a/packages/mui-base/src/Unstable_Popup/PopupContext.ts b/packages/mui-base/src/Unstable_Popup/PopupContext.ts
index 9cad96409c8ea5..0229cccaf96f44 100644
--- a/packages/mui-base/src/Unstable_Popup/PopupContext.ts
+++ b/packages/mui-base/src/Unstable_Popup/PopupContext.ts
@@ -6,3 +6,7 @@ export interface PopupContextValue {
 }
 
 export const PopupContext = React.createContext<PopupContextValue | null>(null);
+
+if (process.env.NODE_ENV !== 'production') {
+  PopupContext.displayName = 'PopupContext';
+}
diff --git a/packages/mui-base/src/useCompound/useCompoundParent.ts b/packages/mui-base/src/useCompound/useCompoundParent.ts
index 61aa53700cc3bd..b85b4d31496d48 100644
--- a/packages/mui-base/src/useCompound/useCompoundParent.ts
+++ b/packages/mui-base/src/useCompound/useCompoundParent.ts
@@ -43,7 +43,9 @@ export const CompoundComponentContext = React.createContext<CompoundComponentCon
   any
 > | null>(null);
 
-CompoundComponentContext.displayName = 'CompoundComponentContext';
+if (process.env.NODE_ENV !== 'production') {
+  CompoundComponentContext.displayName = 'CompoundComponentContext';
+}
 
 export interface UseCompoundParentReturnValue<Key, Subitem extends { ref: React.RefObject<Node> }> {
   /**
diff --git a/packages/mui-base/src/useDropdown/DropdownContext.ts b/packages/mui-base/src/useDropdown/DropdownContext.ts
index 059a7c4c0d455f..5dbd32ceb14827 100644
--- a/packages/mui-base/src/useDropdown/DropdownContext.ts
+++ b/packages/mui-base/src/useDropdown/DropdownContext.ts
@@ -12,4 +12,8 @@ export interface DropdownContextValue {
 
 const DropdownContext = React.createContext<DropdownContextValue | null>(null);
 
+if (process.env.NODE_ENV !== 'production') {
+  DropdownContext.displayName = 'DropdownContext';
+}
+
 export { DropdownContext };
diff --git a/packages/mui-base/src/useList/ListContext.ts b/packages/mui-base/src/useList/ListContext.ts
index b1f8aea95d62a6..5bb81324693228 100644
--- a/packages/mui-base/src/useList/ListContext.ts
+++ b/packages/mui-base/src/useList/ListContext.ts
@@ -8,6 +8,7 @@ export interface ListContextValue<ItemValue> {
 }
 
 export const ListContext = React.createContext<ListContextValue<any> | null>(null);
+
 if (process.env.NODE_ENV !== 'production') {
   ListContext.displayName = 'ListContext';
 }
diff --git a/packages/mui-base/src/useTransition/TransitionContext.ts b/packages/mui-base/src/useTransition/TransitionContext.ts
index 06e2fa23956415..3c59d463b4e429 100644
--- a/packages/mui-base/src/useTransition/TransitionContext.ts
+++ b/packages/mui-base/src/useTransition/TransitionContext.ts
@@ -20,3 +20,7 @@ export type TransitionContextValue = {
 };
 
 export const TransitionContext = React.createContext<TransitionContextValue | null>(null);
+
+if (process.env.NODE_ENV !== 'production') {
+  TransitionContext.displayName = 'TransitionContext';
+}
diff --git a/packages/mui-base/src/utils/ClassNameConfigurator.tsx b/packages/mui-base/src/utils/ClassNameConfigurator.tsx
index 7c05240b84169d..5838b91495cb34 100644
--- a/packages/mui-base/src/utils/ClassNameConfigurator.tsx
+++ b/packages/mui-base/src/utils/ClassNameConfigurator.tsx
@@ -15,6 +15,10 @@ const defaultContextValue: ClassNameConfiguration = {
 const ClassNameConfiguratorContext =
   React.createContext<ClassNameConfiguration>(defaultContextValue);
 
+if (process.env.NODE_ENV !== 'production') {
+  ClassNameConfiguratorContext.displayName = 'ClassNameConfiguratorContext';
+}
+
 export interface ClassNameConfiguratorProps extends Partial<ClassNameConfiguration> {
   children?: React.ReactNode;
 }
diff --git a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx
index fdfbd949dcdd04..b3b8138b8b331d 100644
--- a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx
+++ b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx
@@ -12,6 +12,10 @@ import useSlot from '../utils/useSlot';
 
 export const AvatarGroupContext = React.createContext<AvatarGroupOwnerState | undefined>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  AvatarGroupContext.displayName = 'AvatarGroupContext';
+}
+
 const useUtilityClasses = () => {
   const slots = {
     root: ['root'],
diff --git a/packages/mui-joy/src/Chip/ChipContext.ts b/packages/mui-joy/src/Chip/ChipContext.ts
index d94b224f0e0d92..d4dd7e0e676bd1 100644
--- a/packages/mui-joy/src/Chip/ChipContext.ts
+++ b/packages/mui-joy/src/Chip/ChipContext.ts
@@ -7,4 +7,8 @@ const ChipColorContext = React.createContext<Pick<ChipProps, 'disabled' | 'varia
   color: undefined,
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  ChipColorContext.displayName = 'ChipColorContext';
+}
+
 export default ChipColorContext;
diff --git a/packages/mui-joy/src/FormControl/FormControlContext.ts b/packages/mui-joy/src/FormControl/FormControlContext.ts
index a55f07774cc2d8..35085d852fd4f9 100644
--- a/packages/mui-joy/src/FormControl/FormControlContext.ts
+++ b/packages/mui-joy/src/FormControl/FormControlContext.ts
@@ -16,4 +16,8 @@ export type FormControlContextValue =
 
 const FormControlContext = React.createContext<FormControlContextValue>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  FormControlContext.displayName = 'FormControlContext';
+}
+
 export default FormControlContext;
diff --git a/packages/mui-joy/src/List/ComponentListContext.ts b/packages/mui-joy/src/List/ComponentListContext.ts
index a8c889f3f05761..aff97dca3a362d 100644
--- a/packages/mui-joy/src/List/ComponentListContext.ts
+++ b/packages/mui-joy/src/List/ComponentListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const ComponentListContext = React.createContext<string | undefined>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  ComponentListContext.displayName = 'ComponentListContext';
+}
+
 export default ComponentListContext;
diff --git a/packages/mui-joy/src/List/GroupListContext.ts b/packages/mui-joy/src/List/GroupListContext.ts
index 0f6584855e2355..e4298395f6472d 100644
--- a/packages/mui-joy/src/List/GroupListContext.ts
+++ b/packages/mui-joy/src/List/GroupListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const GroupListContext = React.createContext<undefined | 'menu' | 'select'>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  GroupListContext.displayName = 'GroupListContext';
+}
+
 export default GroupListContext;
diff --git a/packages/mui-joy/src/List/NestedListContext.ts b/packages/mui-joy/src/List/NestedListContext.ts
index 02d171d438d444..f898ff83b51610 100644
--- a/packages/mui-joy/src/List/NestedListContext.ts
+++ b/packages/mui-joy/src/List/NestedListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const NestedListContext = React.createContext<boolean | string>(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  NestedListContext.displayName = 'NestedListContext';
+}
+
 export default NestedListContext;
diff --git a/packages/mui-joy/src/List/RowListContext.ts b/packages/mui-joy/src/List/RowListContext.ts
index 34f73a18906b28..ab535324f9b37c 100644
--- a/packages/mui-joy/src/List/RowListContext.ts
+++ b/packages/mui-joy/src/List/RowListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const RowListContext = React.createContext(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  RowListContext.displayName = 'RowListContext';
+}
+
 export default RowListContext;
diff --git a/packages/mui-joy/src/List/WrapListContext.ts b/packages/mui-joy/src/List/WrapListContext.ts
index 702eb5b96cf811..9624e8a69a0926 100644
--- a/packages/mui-joy/src/List/WrapListContext.ts
+++ b/packages/mui-joy/src/List/WrapListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const WrapListContext = React.createContext(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  WrapListContext.displayName = 'WrapListContext';
+}
+
 export default WrapListContext;
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
index 339d2463cc57d0..b195625fd273d8 100644
--- a/packages/mui-joy/src/ListItem/ListItem.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -17,7 +17,7 @@ import NestedListContext from '../List/NestedListContext';
 import RowListContext from '../List/RowListContext';
 import WrapListContext from '../List/WrapListContext';
 import ComponentListContext from '../List/ComponentListContext';
-import ListSubheaderDispatch from '../ListSubheader/ListSubheaderContext';
+import ListSubheaderContext from '../ListSubheader/ListSubheaderContext';
 import GroupListContext from '../List/GroupListContext';
 
 const useUtilityClasses = (ownerState: ListItemOwnerState) => {
@@ -244,7 +244,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
   });
 
   return (
-    <ListSubheaderDispatch.Provider value={setSubheaderId}>
+    <ListSubheaderContext.Provider value={setSubheaderId}>
       <NestedListContext.Provider value={nested ? subheaderId || true : false}>
         <SlotRoot {...rootProps}>
           {startAction && <SlotStartAction {...startActionProps}>{startAction}</SlotStartAction>}
@@ -265,7 +265,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
           {endAction && <SlotEndAction {...endActionProps}>{endAction}</SlotEndAction>}
         </SlotRoot>
       </NestedListContext.Provider>
-    </ListSubheaderDispatch.Provider>
+    </ListSubheaderContext.Provider>
   );
 }) as OverridableComponent<ListItemTypeMap>;
 
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts b/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts
index 94065dbc891508..b2e7380dae11b1 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts
+++ b/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts
@@ -4,4 +4,8 @@ const ListItemButtonOrientationContext = React.createContext<'horizontal' | 'ver
   'horizontal',
 );
 
+if (process.env.NODE_ENV !== 'production') {
+  ListItemButtonOrientationContext.displayName = 'ListItemButtonOrientationContext';
+}
+
 export default ListItemButtonOrientationContext;
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
index 94720d6d974c52..6af9deba3d4a54 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import { createRenderer } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ListSubheader, { listSubheaderClasses as classes } from '@mui/joy/ListSubheader';
-import ListSubheaderDispatch from './ListSubheaderContext';
+import ListSubheaderContext from './ListSubheaderContext';
 import describeConformance from '../../test/describeConformance';
 
 describe('Joy <ListSubheader />', () => {
@@ -50,9 +50,9 @@ describe('Joy <ListSubheader />', () => {
   it('should call dispatch context with the generated id', () => {
     const dispatch = spy();
     const { container } = render(
-      <ListSubheaderDispatch.Provider value={dispatch}>
+      <ListSubheaderContext.Provider value={dispatch}>
         <ListSubheader />
-      </ListSubheaderDispatch.Provider>,
+      </ListSubheaderContext.Provider>,
     );
 
     // @ts-ignore
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
index 070e599fcc41c7..e880abf242adcf 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
@@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas
 import { styled, useThemeProps } from '../styles';
 import { ListSubheaderOwnerState, ListSubheaderTypeMap } from './ListSubheaderProps';
 import { getListSubheaderUtilityClass } from './listSubheaderClasses';
-import ListSubheaderDispatch from './ListSubheaderContext';
+import ListSubheaderContext from './ListSubheaderContext';
 import useSlot from '../utils/useSlot';
 import { INVERTED_COLORS_ATTR } from '../colorInversion/colorInversionUtils';
 
@@ -88,7 +88,7 @@ const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) {
     ...other
   } = props;
   const id = useId(idOverride);
-  const setSubheaderId = React.useContext(ListSubheaderDispatch);
+  const setSubheaderId = React.useContext(ListSubheaderContext);
 
   React.useEffect(() => {
     if (setSubheaderId) {
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts b/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts
index 1d9258302a4fd6..b7705c35b1bfc7 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts
+++ b/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts
@@ -1,7 +1,11 @@
 import * as React from 'react';
 
-const ListSubheaderDispatch = React.createContext<
+const ListSubheaderContext = React.createContext<
   undefined | React.Dispatch<React.SetStateAction<string>>
 >(undefined);
 
-export default ListSubheaderDispatch;
+if (process.env.NODE_ENV !== 'production') {
+  ListSubheaderContext.displayName = 'ListSubheaderContext';
+}
+
+export default ListSubheaderContext;
diff --git a/packages/mui-joy/src/Modal/CloseModalContext.ts b/packages/mui-joy/src/Modal/CloseModalContext.ts
index 487543623efe95..372a18b97d395c 100644
--- a/packages/mui-joy/src/Modal/CloseModalContext.ts
+++ b/packages/mui-joy/src/Modal/CloseModalContext.ts
@@ -3,4 +3,8 @@ import { ModalProps } from './ModalProps';
 
 const CloseModalContext = React.createContext<undefined | ModalProps['onClose']>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  CloseModalContext.displayName = 'CloseModalContext';
+}
+
 export default CloseModalContext;
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts b/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts
index 061e784aaf6436..927f009620b383 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts
+++ b/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts
@@ -3,4 +3,8 @@ import { ModalDialogProps } from './ModalDialogProps';
 
 const ModalDialogSizeContext = React.createContext<undefined | ModalDialogProps['size']>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  ModalDialogSizeContext.displayName = 'ModalDialogSizeContext';
+}
+
 export default ModalDialogSizeContext;
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts b/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts
index b028adfe78e17d..b4f7e01137c04f 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts
+++ b/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts
@@ -6,4 +6,8 @@ const ModalDialogVariantColorContext = React.createContext<
   | (Pick<ModalDialogProps, 'variant' | 'color'> & { labelledBy?: string; describedBy?: string })
 >(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  ModalDialogVariantColorContext.displayName = 'ModalDialogVariantColorContext';
+}
+
 export default ModalDialogVariantColorContext;
diff --git a/packages/mui-joy/src/Tabs/SizeTabsContext.ts b/packages/mui-joy/src/Tabs/SizeTabsContext.ts
index 4d69a43cf37e4b..340b7ed4d358bf 100644
--- a/packages/mui-joy/src/Tabs/SizeTabsContext.ts
+++ b/packages/mui-joy/src/Tabs/SizeTabsContext.ts
@@ -3,4 +3,8 @@ import { TabsProps } from './TabsProps';
 
 const SizeTabsContext = React.createContext<Exclude<TabsProps['size'], undefined>>('md');
 
+if (process.env.NODE_ENV !== 'production') {
+  SizeTabsContext.displayName = 'SizeTabsContext';
+}
+
 export default SizeTabsContext;
diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx
index 4ac127761679ee..d580c18ee818f0 100644
--- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx
+++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx
@@ -17,4 +17,8 @@ const ToggleButtonGroupContext = React.createContext<ToggleButtonGroupContextTyp
   undefined,
 );
 
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';
+}
+
 export default ToggleButtonGroupContext;
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index 8a84dad92a2327..6e22027df5ad1f 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -22,6 +22,10 @@ import { TypographySystem } from '../styles/types';
  */
 export const TypographyNestedContext = React.createContext(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  TypographyNestedContext.displayName = 'TypographyNestedContext';
+}
+
 /**
  * @internal
  * Typography's level will be inherit within this context unless an explicit `level` prop is provided.
@@ -30,6 +34,10 @@ export const TypographyNestedContext = React.createContext(false);
  */
 export const TypographyInheritContext = React.createContext(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  TypographyInheritContext.displayName = 'TypographyInheritContext';
+}
+
 const useUtilityClasses = (ownerState: TypographyOwnerState) => {
   const { gutterBottom, noWrap, level, color, variant } = ownerState;
 
diff --git a/packages/mui-joy/src/styles/variantColorInheritance.tsx b/packages/mui-joy/src/styles/variantColorInheritance.tsx
index 08bf2298c1f488..f15ea4c85ec58c 100644
--- a/packages/mui-joy/src/styles/variantColorInheritance.tsx
+++ b/packages/mui-joy/src/styles/variantColorInheritance.tsx
@@ -3,6 +3,10 @@ import { ColorPaletteProp, VariantProp } from '@mui/joy/styles/types';
 
 const VariantColorContext = React.createContext<string | undefined>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  VariantColorContext.displayName = 'VariantColorContext';
+}
+
 /**
  * @internal For internal usage only.
  *
diff --git a/packages/mui-material-next/src/Tabs/TabsListContext.js b/packages/mui-material-next/src/Tabs/TabsListContext.js
index 7628450081b116..43208b9b7f0da4 100644
--- a/packages/mui-material-next/src/Tabs/TabsListContext.js
+++ b/packages/mui-material-next/src/Tabs/TabsListContext.js
@@ -3,4 +3,8 @@ import * as React from 'react';
 
 const TabsListContext = React.createContext(null);
 
+if (process.env.NODE_ENV !== 'production') {
+  TabsListContext.displayName = 'TabsListContext';
+}
+
 export default TabsListContext;
diff --git a/packages/mui-system/src/Unstable_Grid/createGrid.tsx b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
index 38b361a9a2a44b..092185ae30fcb1 100644
--- a/packages/mui-system/src/Unstable_Grid/createGrid.tsx
+++ b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
@@ -57,7 +57,11 @@ export default function createGrid(
     componentName = 'MuiGrid',
   } = options;
 
-  const OverflowContext = React.createContext<boolean | undefined>(undefined);
+  const GridOverflowContext = React.createContext<boolean | undefined>(undefined);
+
+  if (process.env.NODE_ENV !== 'production') {
+    GridOverflowContext.displayName = 'GridOverflowContext';
+  }
 
   const useUtilityClasses = (ownerState: GridOwnerState, theme: typeof defaultTheme) => {
     const { container, direction, spacing, wrap, gridSize } = ownerState;
@@ -91,7 +95,7 @@ export default function createGrid(
     const theme = useTheme();
     const themeProps = useThemeProps<typeof inProps & { component?: React.ElementType }>(inProps);
     const props = extendSxProp(themeProps) as Omit<typeof themeProps, 'color'> & GridOwnerState; // `color` type conflicts with html color attribute.
-    const overflow = React.useContext(OverflowContext);
+    const overflow = React.useContext(GridOverflowContext);
     const {
       className,
       children,
@@ -171,11 +175,13 @@ export default function createGrid(
     );
 
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
-      // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+      // There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.
       // 2. It is a nested grid with different `disableEqualOverflow` from the context.
       result = (
-        <OverflowContext.Provider value={disableEqualOverflow}>{result}</OverflowContext.Provider>
+        <GridOverflowContext.Provider value={disableEqualOverflow}>
+          {result}
+        </GridOverflowContext.Provider>
       );
     }
 
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index b6c1877bbaea65..a342d95946c975 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -48,6 +48,10 @@ export default function createCssVarsProvider(options) {
   }
   const ColorSchemeContext = React.createContext(undefined);
 
+  if (process.env.NODE_ENV !== 'production') {
+    ColorSchemeContext.displayName = 'ColorSchemeContext';
+  }
+
   const useColorScheme = () => {
     const value = React.useContext(ColorSchemeContext);
     if (!value) {