如何移除MUI MenuItem组件的默认hover效果？

你之前的代码无效，是因为没完全覆盖MenuItem的默认悬停样式（包括内置的过渡动画）。试试这两种可行方案：

方案一：彻底移除悬停背景与动画 #

<MenuItem 
  divider 
  sx={{
    '&:hover': {
      backgroundColor: 'transparent', // 用透明适配任意背景，也可换成你需要的颜色
      transition: 'none' // 取消默认的背景色渐变动画
    }
  }}
>
  {`${selectedObj.tag.name}`}
</MenuItem>

方案二：同时关闭波纹效果（可选） #

如果不需要点击时的波纹反馈，可加上disableRipple属性简化代码：

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

关键说明 #

• 用transparent替代white更灵活，避免和页面背景色冲突
• transition: 'none'是核心，能彻底消除默认的悬停渐变动画，这是你之前代码缺失的部分
• disableRipple仅关闭点击波纹，按需启用即可

内容的提问来源于stack exchange，提问作者Cameron Bogucki