SX props not working with UserMenu Component

[ektasawant]

Describe the desired behavior

SX props should work with UserMenu component similar to other components.

Describe the current behavior

Currently if we try to use below classes it will not reflect changes

• .BluiUserMenu-header
• .BluiUserMenu-headerRoot
• .BluiUserMenu-menuTitle
• .BluiUserMenu-navigation
• .BluiUserMenu-navGroups
• .BluiUserMenu-noCursor
• .BluiUserMenu-bottomSheet
• .BluiUserMenu-headerTitle
• .BluiUserMenu-headerSubtitle

The reason behind this is above classes are part of present MuiPaper-root instead of component's root dom.

Is this request related to a current issue?

No

Additional Context

Screenshot

[daileytj]

marking this as 'needs-review' to make sure that this is still an issue

[daileytj]

Docs will need updated to expose all of these global CSS classes. We should also integrate all the new classes that were added in the SX/Mui5 migration so end-users can customize all of these styles via the classes prop.

[joebochill]

Just adding a note of clarity on this (expanding on Ekta's description)...the reason these classes do not work inside of the SX prop of the UserMenu is because the menu itself is rendered in a MUI portal...so it is removed from the part of the DOM where the Avatar exists and is put into the 'presentation' container where things like Modals, etc. get rendered. The SX prop implies a parent/child relationship between the classes, which is not present here because they are in two places in the dom. We could disable the portal behavior for the UserMenu (so the Menu appears as a child of the UserMenu root) (I think), but I'm not 100% sure what the consequences of that are (e.g., performance, etc.).