diff --git a/.changeset/strong-emus-drive.md b/.changeset/strong-emus-drive.md new file mode 100644 index 0000000000..00a9786354 --- /dev/null +++ b/.changeset/strong-emus-drive.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': patch +--- + +Add a different background colour to focused `MenuItem`s to fix a bug in MUI 4 (which is fixed in MUI 5) diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 1d07c318a0..d627ecdcb7 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -269,4 +269,14 @@ export const defaultComponentThemes: ThemeOptions['components'] = { MuiPaper: { styleOverrides: { root: { backgroundImage: 'unset' } }, }, + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + // Fixes a bug with MUI 4 that's fixed in MUI 5 + '&:focus': { + backgroundColor: theme.palette.action.focus, + }, + }), + }, + }, };