如何通过 MUI 的 sx 属性自定义选中 MenuItem 的样式-js教程

本文详解如何在 mui（material ui）中正确使用 `sx` prop 为 `menuitem` 设置选中态（selected）样式，重点解决 `&:selected` 无效问题，并提供适用于 `select` 下拉菜单和独立 `menuitem` 的两种可靠方案。

在 MUI 中，MenuItem 组件本身并不原生支持 :selected 伪类——这是常见误区。浏览器标准中 :selected 仅适用于 元素，而 MUI 的 MenuItem 是一个自定义的

✅ 正确方式是使用 .Mui-selected 类选择器：

const MenuItemStyle = {
  '&:hover': {
    backgroundColor: theme.palette.secondary.light, // 推荐使用 palette 而非硬编码 color
  },
  '&.Mui-selected, &.Mui-selected:hover': {
    backgroundColor: theme.palette.secondary.light,
    fontWeight: 'bold' as const, // 可追加其他视觉反馈
  },
  '&:focusVisible': {
    outline: '2px solid',
    outlineColor: theme.palette.primary.main,
  },
};

并在组件中使用：