From 5065a5e8ebd6227febd3ae49cf791e25b37ebff5 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 31 May 2023 20:57:29 +0200
Subject: [PATCH] theme: avoid jss class name conflict

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/hot-apples-cross.md                 |  5 +++++
 .../theme/src/unified/UnifiedThemeProvider.tsx | 18 ++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hot-apples-cross.md

diff --git a/.changeset/hot-apples-cross.md b/.changeset/hot-apples-cross.md
new file mode 100644
index 0000000000..3284c0ca8f
--- /dev/null
+++ b/.changeset/hot-apples-cross.md
@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Tweaked `UnifiedThemeProvider` to avoid overlapping JSS class names in production.
diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx
index c7054e0e55..41605aee62 100644
--- a/packages/theme/src/unified/UnifiedThemeProvider.tsx
+++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx
@@ -16,7 +16,11 @@
 
 import React, { ReactNode } from 'react';
 import './MuiClassNameSetup';
-import { ThemeProvider } from '@material-ui/core/styles';
+import {
+  ThemeProvider,
+  StylesProvider,
+  createGenerateClassName,
+} from '@material-ui/core/styles';
 import {
   StyledEngineProvider,
   ThemeProvider as Mui5Provider,
@@ -35,6 +39,12 @@ export interface UnifiedThemeProviderProps {
   noCssBaseline?: boolean;
 }
 
+// See https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5
+const generateV4ClassName = createGenerateClassName({
+  disableGlobal: true,
+  seed: 'mui', // using a slightly shorter prefix than suggested in the docs
+});
+
 /**
  * Provides themes for all MUI versions supported by the provided unified theme.
  *
@@ -61,7 +71,11 @@ export function UnifiedThemeProvider(
   );
 
   if (v4Theme) {
-    result = <ThemeProvider theme={v4Theme}>{result}</ThemeProvider>;
+    result = (
+      <StylesProvider generateClassName={generateV4ClassName}>
+        <ThemeProvider theme={v4Theme}>{result}</ThemeProvider>
+      </StylesProvider>
+    );
   }
 
   if (v5Theme) {