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

Question

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

选定的 MenuItem 具有此背景颜色:

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

这是我的 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 组件的背景，使用 classes 属性将 root 类作为目标并添加 :hover 风格。

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

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

要更改所选 MenuItem 的 bg，需要做类似的事情。对于此目标，MenuItem 的 selected 和 root 类。

<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 样式的方法:-
将类 classes={{ selected: classes.selected, root: classes.rootMenuItem }} 赋予每个 ListItem 是不可取的，它会增加代码重复和紫罗兰一些干净的代码规则(如果遵循的话)。因此，为了克服这个问题，请使用 withStyles 创建自定义 listItem。

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>

注意:- 我在此处添加了随机背景颜色。

工作演示:-