mui-nested-menu
mui-nested-menu copied to clipboard
Styling the menu via mui's "MenuProps" breaks the menu's hover
After changing the <NestedMenuItem /> height, it no longer closes on mouse leave.
Example code:
<NestedMenuItem
key={item.label}
leftIcon={icon}
className={twMerge(
'[&>div>p]:text-[13px] [&>div>p]:font-medium [&>div>p]:pl-3',
className,
)}
label={label}
parentMenuOpen={open}
data-testid={`nested-menu-item-${index}`}
MenuProps={{
style: {
maxHeight: 'auto',
},
PaperProps: {
style: {
maxHeight: '100%',
height: '300px',
},
},
}}
>
{renderMenuItems(nested, open, handleMenuClose)}
</NestedMenuItem>