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..613f89d5e0 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,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 = {result};
+ result = (
+
+ {result}
+
+ );
}
if (v5Theme) {
diff --git a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx
index 2508604ca9..2a22689285 100644
--- a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx
+++ b/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,