theme: avoid jss class name conflict

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/hot-apples-cross.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Tweaked `UnifiedThemeProvider` to avoid overlapping JSS class names in production.

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) {