Merge pull request #18048 from backstage/rugvip/jss

theme: avoid jss class name conflict

.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,14 @@ export interface UnifiedThemeProviderProps {
   noCssBaseline?: boolean;
 }
 
+// Background at https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5
+// Rather than disabling globals and custom seed, we instead only set a production prefix that
+// won't collide with MUI 5 styles. We've already got a separate class name generator for v5 set
+// up in MuiClassNameSetup.ts, so only the production JSS needs deduplication.
+const generateV4ClassName = createGenerateClassName({
+  productionPrefix: 'jss4-',
+});
+
 /**
  * Provides themes for all MUI versions supported by the provided unified theme.
  *
@@ -61,7 +73,11 @@ export function UnifiedThemeProvider(
   );
 
   if (v4Theme) {
-    result = <ThemeProvider theme={v4Theme}>{result}</ThemeProvider>;
+    result = (
+      <StylesProvider generateClassName={generateV4ClassName}>
+        <ThemeProvider theme={v4Theme}>{result}</ThemeProvider>
+      </StylesProvider>
+    );
   }
 
   if (v5Theme) {

plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx

@@ -34,7 +34,7 @@ describe('SearchResultPager', () => {
   it('renders pager buttons', async () => {
     const fetchNextPage = jest.fn();
     const fetchPreviousPage = jest.fn();
-    (useSearch as jest.Mock).mockReturnValueOnce({
+    (useSearch as jest.Mock).mockReturnValue({
       result: { loading: false, value: [] },
       fetchNextPage,
       fetchPreviousPage,