You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.0 KiB
52 lines
1.0 KiB
import { |
|
MenuItem as MUIMenuItem, |
|
menuItemClasses as muiMenuItemClasses, |
|
MenuItemProps as MUIMenuItemProps, |
|
} from '@mui/material'; |
|
|
|
import { GREY, TEXT } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
const MenuItem = (menuItemProps: MUIMenuItemProps): JSX.Element => { |
|
const { children, sx } = menuItemProps; |
|
const combinedSx = { |
|
backgroundColor: TEXT, |
|
paddingRight: '3em', |
|
|
|
[`&.${muiMenuItemClasses.selected}`]: { |
|
backgroundColor: GREY, |
|
fontWeight: 400, |
|
|
|
[`&.${muiMenuItemClasses.focusVisible}`]: { |
|
backgroundColor: GREY, |
|
}, |
|
|
|
'&:hover': { |
|
backgroundColor: GREY, |
|
}, |
|
}, |
|
|
|
[`&.${muiMenuItemClasses.focusVisible}`]: { |
|
backgroundColor: GREY, |
|
}, |
|
|
|
'&:hover': { |
|
backgroundColor: GREY, |
|
}, |
|
|
|
...sx, |
|
}; |
|
|
|
return ( |
|
<MUIMenuItem |
|
// eslint-disable-next-line react/jsx-props-no-spreading |
|
{...{ |
|
...menuItemProps, |
|
sx: combinedSx, |
|
}} |
|
> |
|
{children} |
|
</MUIMenuItem> |
|
); |
|
}; |
|
|
|
export default MenuItem;
|
|
|