fix(sidebar): fixing styles break when marketplace plugin drawers opens #2786
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here.
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
its-mitesh-kumar
changed the title
|
The image is available at: |
|
/retest-required |
|
/cc @logonoff |
| '& .MuiTypography-root': { | ||
| color: '#ffffff !important', | ||
| }, | ||
| '& svg': { | ||
| color: '#ffffff !important', | ||
| }, |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
@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
-
Scoped Emotion Cache (CacheProvider with prepend: true)
→ This helped to some extent but didn’t completely solve the issue. -
Scoped ThemeProvider with custom overrides for MuiButtonBase
→ Again, this only partially resolved the styling conflict. -
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 .
|
This PR is stale because it has been open 7 days with no activity. Remove stale label or comment or this will be closed in 21 days. |
Description : Fixing styles break when marketplace plugin drawers opens
Before :
Screen.Recording.2025-04-10.at.1.59.02.AM.1.mov
After:
Screen.Recording.2025-04-22.at.4.24.29.PM.mov