Skip to content

fix(sidebar): fixing styles break when marketplace plugin drawers opens #2786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(sidebar): fixing styles break when marketplace plugin drawers opens #2786

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e3c901
fix(sidebar): fixing Administration styles break when maketplace plug…
its-mitesh-kumar Apr 22, 2025
ada474f
Merge branch 'main' into fix/sidebar
its-mitesh-kumar Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/app/src/components/Root/Root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,16 @@ const useStyles = makeStyles()({
},
sidebarItem: {
textDecorationLine: 'none',
'& .MuiTypography-root': {
color: '#ffffff !important',
},
'& svg': {
color: '#ffffff !important',
},
Comment on lines +101 to +106
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, but I'm really skeptical that this is the right approach because this completely ignores the theme. Can you please test it with adjusted sidebar colors.

I guess it would be good to brainstorm the underlying issue with some others from the team.

First: Who sets this extra styles when the drawer is open.

Is it possible override/remove just these styles? Is it maybe an rhdh theme issue?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@christoph-jerolimov Let me explain the issue in detail:

Issue
When opening the Marketplace Drawer, which renders components like <LinkButton /> and <PluginPackageTable />, the styles applied to the Backstage Sidebar items (BackstageSidebarItem-root) were unexpectedly overridden.

Root Cause
As Emotion injects styles into the DOM in the order components are mounted.
Since the Marketplace Drawer is mounted after the Sidebar and contains components like and (which internally use ), Emotion injects MUI styles (like .MuiButton-root, .MuiButton-text) after the sidebar styles (e.g., .BackstageSidebarItem-root).
Due to the later injection of styles from Marketplace Drawer, the sidebar styles get overridden unintentionally.

Solutions Tried

  1. Scoped Emotion Cache (CacheProvider with prepend: true)
    → This helped to some extent but didn’t completely solve the issue.

  2. Scoped ThemeProvider with custom overrides for MuiButtonBase
    → Again, this only partially resolved the styling conflict.

  3. Shadow DOM isolation
    → Not implemented as it requires introducing a new library and comes with extra overhead.

Final Workaround
Since the above solutions were not sufficient, I opted for direct style overrides using higher specificity and !important to reliably enforce the Sidebar styles .

Since in both light and dark theme , color should be white only , that's why ignored the theme .

Let me know if we should approach it differently .

'&.MuiButton-root, &.MuiButton-text': {
padding: '0 !important',
minWidth: 'auto',
},
},
});

Expand Down
Loading