如何在选中MenuItem后修改MUI Select组件的背景颜色？

你可以通过根据选中的角色值动态绑定背景色来实现需求，具体操作如下：

1. 定义角色与背景色的映射关系 #

在组件内先定义一个对象，存储每个角色对应的背景色：

const roleBgColors = {
  "": "#393939", // 空选项默认颜色
  "admin": "#2d6a4f", // Admin对应的背景色
  "user": "#0b5ed7", // User对应的背景色
  "viewer": "#6c757d" // Viewer对应的背景色
};

颜色值可根据你的需求自行调整。

2. 动态绑定Select的背景色 #

修改Select组件的sx属性，把固定的bgColor替换为根据当前role值从映射中获取的颜色：

<FormControl>
  <Select
    displayEmpty
    variant="outlined"
    id="role"
    name="role"
    className="border text-white"
    sx={{
      // 动态切换背景色
      bgColor: roleBgColors[role],
      color: 'white',
      '& .MuiSelect-iconOutlined': {
        color: '#393939',
      },
    }}
    value={role}
    onChange={(event) => {
      handleChange(event);
      handleRoleSwitch(event);
    }}
    onBlur={handleBlur('role')}
    MenuProps={{
      PaperProps: {
        sx: {
          bgcolor: '#393939',
          '& .MuiMenuItem-root': {
            padding: 2,
            color: 'white',
          },
        },
      },
    }}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem className="text-white" value="admin">
      Admin
    </MenuItem>
    <MenuItem className="text-white" value="user">
      User
    </MenuItem>
    <MenuItem className="text-white" value="viewer">
      Viewer
    </MenuItem>
  </Select>
</FormControl>

原理说明 #

你的handleChange函数已经在更新role状态，当用户选中不同菜单项时，role值会同步变化，Select的bgColor会自动从roleBgColors中匹配对应颜色，实现背景色的动态切换。

如果角色数量较少，也可以直接用条件判断设置样式：

bgColor: role === "admin" ? "#2d6a4f" : role === "user" ? "#0b5ed7" : "#393939"

但对象映射的方式在角色较多时更易维护。

内容的提问来源于stack exchange，提问作者Jennifer De Goede