how can you remove the default hover effect with MenuItem Mui class

Question

im trying to remove the default gray hover over animation with MUI menu item class..

here are some examples that ive tried that Dont work.

<MenuItem divider sx={{'&:hover':{backgroundColor:'white'}}}>{`${selectedObj.tag.name}`}</MenuItem>

<MenuItem divider sx={{'&:hover':'none'}}>{`${selectedObj.tag.name}`}</MenuItem>

Answer 1

This should work with MUI version 5.10.16

<MenuItem divider sx={{ '&:hover': { backgroundColor: 'white' } }}>
      Hover me
</MenuItem>

Check this Demo