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,