Material UI 选择焦点和选定的背景颜色

Question

我里面有 Select 组件和 MenuItems，我想从聚焦的 Select 组件和选定的 MenuItem 中删除或覆盖背景颜色。

选定的 MenuItem 具有以下背景颜色：

在我选择项目后，选择组件具有焦点，如下所示：

这是我的 Select 组件和其中的 MenuItem：

<Select
    classes={{ focused: classes.selected }}
>
    <MenuItem
        classes={{ selected: classes.selected }}
    >
        Never
    </MenuItem>
</Select>

我只是尝试覆盖背景颜色以使其与正常情况相同：

focused: {
    backgroundColor: "#fff",
},

selected: {
    backgroundColor: "#fff",
},

有关如何删除或覆盖这些背景颜色的任何提示？选择选项后，选择组件不必保持焦点。

编辑：发现焦点出现在哪里，我很确定我需要通过 inputProps 来定位它，但不知道如何：

Answer 1

Select要更改焦点组件的背景，root请使用classesprop 定位类并添加:hover样式。

<Select classes={{ root: classes.selectRoot }}>
{... menuitems}
</Select>

const useStyles = makeStyles((theme) => ({
  selectRoot: {
  //...other styles
    '&:focus':{
      backgroundColor:'yellow'
    }
  }
}));

为了更改所选的背景MenuItem，需要执行类似的操作。对于这个目标selected和root的类MenuItem。

<MenuItem
  classes={{ selected: classes.selected, root: classes.rootMenuItem }}
  value={"1"}>
  Never
</MenuItem>

const useStyles = makeStyles((theme) => ({
  selected: {
  },
  rootMenuItem: {
    "&$selected": {
      backgroundColor: "red",
        "&:hover": {
          backgroundColor: "green"
         }
      },
    '&:hover':{
      backgroundColor:'blue'
    }
  }
}));

另一种样式设置方式MenuItem：-为每个类
提供类并不是可取的，它会增加代码重复，并且还会破坏一些干净的代码规则（如果遵循）。因此，为了克服这个问题，请使用创建自定义 listItem 。classes={{ selected: classes.selected, root: classes.rootMenuItem }}ListItemwithStyles

const CustomMenuItem = withStyles((theme) =>createStyles({
  root:{
        "&$selected": {
            backgroundColor: "red",
            "&:hover": {
                backgroundColor: "green"
            }
    },
    '&:hover':{
      backgroundColor:'blue'
    }
  },
  selected:{
    
  }
})
)(MenuItem);

现在用它CustomMenuItem 代替ListItem.

<Select classes={{ root: classes.selectRoot }}>
  <CustomMenuItem value={"1"}>Never1</CustomMenuItem>
  <CustomMenuItem value={"2"}>Never2</CustomMenuItem>
  <CustomMenuItem value={"3"}>Never3</CustomMenuItem>
</Select>

注意：- 我在这里添加了随机背景颜色。

工作演示：-