如何使用sx属性覆盖MUI选中MenuItem的CSS样式？

问题出在选择器的使用上——MUI的MenuItem组件不是用:selected原生伪类来标记选中状态的，而是会给选中的MenuItem元素添加一个Mui-selected的自定义类名。你原来的:selected选择器匹配不到任何元素，所以选中样式不生效。

修改后的样式代码如下：

const MenuItemStyle = {
  '&:hover': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
  // 改用MUI的选中类选择器
  '&.Mui-selected, &.Mui-selected:hover': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
  '&:focusVisible': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
}

替换后，选中和选中时hover的样式就能正常生效了。另外补充下，MUI大部分组件的状态（比如选中、禁用等）都是通过这类自定义类来实现的，而非原生伪类，遇到类似问题可以直接查看组件的DOM结构，确认对应的类名后再写样式。

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