From 5dd5316040c9e9434930574dde1878f87f0623bd Mon Sep 17 00:00:00 2001
From: rohitratannagar <123488044+rohitratannagar@users.noreply.github.com>
Date: Mon, 11 May 2026 15:44:58 +0530
Subject: [PATCH] fix(bulk-import): scope JSS class names to prevent style
 collisions (#3090)

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../bulk-import/.changeset/old-eggs-pick.md   |  5 ++++
 .../bulk-import/src/components/Router.tsx     | 29 ++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 workspaces/bulk-import/.changeset/old-eggs-pick.md

diff --git a/workspaces/bulk-import/.changeset/old-eggs-pick.md b/workspaces/bulk-import/.changeset/old-eggs-pick.md
new file mode 100644
index 0000000000..59a5bd4532
--- /dev/null
+++ b/workspaces/bulk-import/.changeset/old-eggs-pick.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-bulk-import': patch
+---
+
+Scope JSS class names with a unique seed to prevent style collisions with
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Router.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Router.tsx
index 911c0f9343..c1f470421c 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Router.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Router.tsx
@@ -16,6 +16,7 @@
 
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { createGenerateClassName, StylesProvider } from '@mui/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { importHistoryRouteRef } from '../routes';
@@ -24,20 +25,26 @@ import { ImportHistoryPage } from './Repositories/ImportHistoryPage';
 
 const queryClient = new QueryClient();
 
+const generateClassName = createGenerateClassName({
+  seed: 'bulk-import',
+});
+
 /**
  *
  * @public
  */
 export const Router = () => (
-  <QueryClientProvider client={queryClient}>
-    <Routes>
-      <Route path="/" element={<AddRepositoriesPage />} />
-      <Route
-        path={importHistoryRouteRef.path}
-        element={<ImportHistoryPage />}
-      />
-      {/* Redirect any undefined paths to the root */}
-      <Route path="*" element={<Navigate to="/bulk-import" replace />} />
-    </Routes>
-  </QueryClientProvider>
+  <StylesProvider generateClassName={generateClassName}>
+    <QueryClientProvider client={queryClient}>
+      <Routes>
+        <Route path="/" element={<AddRepositoriesPage />} />
+        <Route
+          path={importHistoryRouteRef.path}
+          element={<ImportHistoryPage />}
+        />
+        {/* Redirect any undefined paths to the root */}
+        <Route path="*" element={<Navigate to="/bulk-import" replace />} />
+      </Routes>
+    </QueryClientProvider>
+  </StylesProvider>
 );