diff --git a/.changeset/breezy-bushes-divide.md b/.changeset/breezy-bushes-divide.md
new file mode 100644
index 0000000000..a7b7d9f4dd
--- /dev/null
+++ b/.changeset/breezy-bushes-divide.md
@@ -0,0 +1,7 @@
+---
+'@backstage/theme': patch
+---
+
+Fixes occasional duplication of v5 class name prefix for MUI 5 components.
+
+Documentation added to explain how to resolve missing v5 prefix in class names when using MUI 5 components in main app.
diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md
index 107fde3d57..48d6c6bcf6 100644
--- a/docs/conf/user-interface/index.md
+++ b/docs/conf/user-interface/index.md
@@ -634,3 +634,53 @@ export const myTheme = createUnifiedTheme({
 ```
 
 </details>
+
+<details>
+  <summary>Missing v5 prefix for MUI 5 class names</summary>
+
+If you are using MUI 5 components in the main app, you may notice that the rendered elements have a `v5-` prefix in front of the MUI class names, but not when you try to use the class name props in code.
+
+Example:
+
+```html
+<button class="v5-MuiButtonBase-root v5-MuiButton-root ..." ...
+```
+
+```jsx
+import { buttonClasses } from '@mui/material/Button'
+
+...
+
+console.log(buttonClasses.root)
+// outputs "MuiButton-root" instead of "v5-MuiButton-root"
+```
+
+The reason for this is that the `UnifiedThemeProvider` is configuring the MUI class name generator function too late. According to [MUI 5 docs](https://v5.mui.com/material-ui/experimental-api/classname-generator/#caveat), it should be configured before any MUI 5 components load.
+
+To resolve this issue:
+
+1. Create a file that configures the class name generator, e.g. `packages/app/src/MuiClassnameSetup.ts`, containing:
+
+```ts
+// this replicates functionality from UnifiedThemeProvider
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
+
+ClassNameGenerator.configure(componentName => {
+  if ((componentName ?? '').startsWith('v5-')) {
+    return componentName;
+  }
+  return `v5-${componentName}`;
+});
+```
+
+2. Import this as the very first thing in `packages/app/src/index.tsx`
+
+```tsx
+// CRITICAL: Must be first import so that static MUI V5 class names are
+// generated before any MUI V5 components load
+import './MuiClassnameSetup'
+
+...
+```
+
+</details>
diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx
index 69d843ed3e..f10320393d 100644
--- a/packages/theme/src/unified/UnifiedThemeProvider.tsx
+++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx
@@ -47,6 +47,9 @@ export interface UnifiedThemeProviderProps {
  * This call needs to be in the same module as the `UnifiedThemeProvider` to ensure that it doesn't get removed by tree shaking
  */
 ClassNameGenerator.configure(componentName => {
+  if ((componentName ?? '').startsWith('v5-')) {
+    return componentName;
+  }
   return `v5-${componentName}`;
 });