From 83856ffe55a2b936e286ed11f3042e44f288ee64 Mon Sep 17 00:00:00 2001 From: Rajib Quayum Date: Fri, 27 Feb 2026 12:45:57 -0500 Subject: [PATCH] chore: add changeset Signed-off-by: Rajib Quayum --- .changeset/vast-jeans-boil.md | 24 +++++++++++++++++++ .../theme/src/unified/MuiClassNameSetup.ts | 5 ++-- 2 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 .changeset/vast-jeans-boil.md diff --git a/.changeset/vast-jeans-boil.md b/.changeset/vast-jeans-boil.md new file mode 100644 index 0000000000..86f63b2a6d --- /dev/null +++ b/.changeset/vast-jeans-boil.md @@ -0,0 +1,24 @@ +--- +'example-app-legacy': minor +'@backstage/create-app': minor +'@backstage/theme': minor +'example-app': minor +--- + +Separates MUI 5 class name generator code into separate file and entry point that can be imported before any MUI 5 component loads. + +This addresses the problem where the elements contain the `v5-` prefix for MUI class names, but the static class names from the library do not. + +Import should be made as follows to ensure the prefix problem is addressed correctly: + +```diff +// packages/app/index.ts + ++ import '@backstage/theme/MuiClassNameSetup'; // must be the very first import! +import '@backstage/cli/asset-types'; +import ReactDOM from 'react-dom/client'; +import app from './App'; +import '@backstage/ui/css/styles.css'; + +ReactDOM.createRoot(document.getElementById('root')!).render(app); +``` diff --git a/packages/theme/src/unified/MuiClassNameSetup.ts b/packages/theme/src/unified/MuiClassNameSetup.ts index 1c1b854211..5d9fcbd93d 100644 --- a/packages/theme/src/unified/MuiClassNameSetup.ts +++ b/packages/theme/src/unified/MuiClassNameSetup.ts @@ -20,9 +20,10 @@ import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material * * This needs to be configured before any MUI 5 component can possibly be imported. See: https://v5.mui.com/material-ui/experimental-api/classname-generator/#caveat * - * ```packages/app/index.ts + * ```diff + * // packages/app/index.ts * - * import '@backstage/theme/MuiClassNameSetup'; // must be the very first import! + * + import '@backstage/theme/MuiClassNameSetup'; // must be the very first import! * import '@backstage/cli/asset-types'; * import ReactDOM from 'react-dom/client'; * import app from './App';