From fbddd47bd79ffaebd74d58dc00fd6f3cf613c85e Mon Sep 17 00:00:00 2001 From: Eswaraiahsapram Date: Thu, 7 May 2026 10:39:26 +0530 Subject: [PATCH] fix(RHDHBUGS-2291): use &.Mui-selected syntax for MuiBottomNavigationAction MUI requires selected state styles to be nested inside root using the '&.Mui-selected' selector instead of a top-level 'selected' key in styleOverrides. The previous approach caused a CSS specificity warning in the console. Assisted-by: Cursor Co-authored-by: Cursor --- .../theme/.changeset/fix-mui-bottom-nav-selected.md | 5 +++++ .../theme/plugins/theme/src/utils/createComponents.ts | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 workspaces/theme/.changeset/fix-mui-bottom-nav-selected.md diff --git a/workspaces/theme/.changeset/fix-mui-bottom-nav-selected.md b/workspaces/theme/.changeset/fix-mui-bottom-nav-selected.md new file mode 100644 index 0000000000..98eedcdb3f --- /dev/null +++ b/workspaces/theme/.changeset/fix-mui-bottom-nav-selected.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-theme': patch +--- + +fix(RHDHBUGS-2291): use `&.Mui-selected` syntax for MuiBottomNavigationAction to resolve CSS specificity console warning diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts index 8f544e043a..ab7dc0c840 100644 --- a/workspaces/theme/plugins/theme/src/utils/createComponents.ts +++ b/workspaces/theme/plugins/theme/src/utils/createComponents.ts @@ -701,10 +701,10 @@ export const createComponents = (themeConfig: ThemeConfig): Components => { '&:hover, &:focus-visible': { backgroundColor: `${sidebarItemInteractionBackgroundColor} !important`, }, - }, - selected: { - backgroundColor: `${sidebarItemInteractionBackgroundColor} !important`, - color: `${navigationSelectedColor} !important`, + '&.Mui-selected': { + backgroundColor: `${sidebarItemInteractionBackgroundColor} !important`, + color: `${navigationSelectedColor} !important`, + }, }, }, };