fix(theme): add workaround to load mui v5 theme correctly when packag…

…e test plugins Signed-off-by: Christoph Jerolimov <[email protected]>
redhat-developer · Dec 16, 2024 · 1728bf7 · 1728bf7
1 parent 1c566f6
commit 1728bf7
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 2 deletions.
diff --git a/workspaces/theme/plugins/bc-test/package.json b/workspaces/theme/plugins/bc-test/package.json
@@ -35,7 +35,8 @@
   "dependencies": {
     "@backstage/core-components": "^0.15.1",
     "@backstage/core-plugin-api": "^1.10.0",
-    "@backstage/plugin-user-settings": "^0.8.16"
+    "@backstage/plugin-user-settings": "^0.8.16",
+    "@mui/material": "^5"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"

diff --git a/workspaces/theme/plugins/bc-test/src/index.ts b/workspaces/theme/plugins/bc-test/src/index.ts
@@ -13,4 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
+
+ClassNameGenerator.configure(componentName => {
+  return componentName.startsWith('v5-')
+    ? componentName
+    : `v5-${componentName}`;
+});
+
 export * from './plugin';
diff --git a/workspaces/theme/plugins/mui4-test/package.json b/workspaces/theme/plugins/mui4-test/package.json
@@ -38,7 +38,8 @@
     "@backstage/plugin-user-settings": "^0.8.16",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.61"
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/material": "^5"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"

diff --git a/workspaces/theme/plugins/mui4-test/src/index.ts b/workspaces/theme/plugins/mui4-test/src/index.ts
@@ -13,4 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
+
+ClassNameGenerator.configure(componentName => {
+  return componentName.startsWith('v5-')
+    ? componentName
+    : `v5-${componentName}`;
+});
+
 export * from './plugin';
diff --git a/workspaces/theme/plugins/mui5-test/src/index.ts b/workspaces/theme/plugins/mui5-test/src/index.ts
@@ -13,4 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
+
+ClassNameGenerator.configure(componentName => {
+  return componentName.startsWith('v5-')
+    ? componentName
+    : `v5-${componentName}`;
+});
+
 export * from './plugin';
diff --git a/workspaces/theme/yarn.lock b/workspaces/theme/yarn.lock
@@ -10066,6 +10066,7 @@ __metadata:
     "@backstage/dev-utils": ^1.1.2
     "@backstage/plugin-user-settings": ^0.8.16
     "@backstage/test-utils": ^1.7.0
+    "@mui/material": ^5
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0
     "@testing-library/user-event": ^14.0.0
@@ -10090,6 +10091,7 @@ __metadata:
     "@material-ui/core": ^4.9.13
     "@material-ui/icons": ^4.9.1
     "@material-ui/lab": ^4.0.0-alpha.61
+    "@mui/material": ^5
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0
     "@testing-library/user-event": ^14.0.0