如何更改下拉悬停颜色反应 Material-UI Select

Question

我需要将下拉悬停更改为绿色。我尝试了内联 CSS 和makeStyle()，但这些都不适合我。我不知道改变这个悬停颜色。如果有人能帮助我解决这个问题，我真的很感激。

我需要将此悬停颜色更改为绿色。这是我的代码：-

                        <Select
                            className={dropDowStyle.select}
                            style={{
                                borderRadius: '8px', marginLeft: '-150px',
                                width: '163px', height: '45px', fontSize: '15px',
                                backgroundColor: "transparent",borderColor:primaryColor + "88"
                            }}
                            sx={{width: 163}}
                            // defaultValue=""
                            input={<OutlinedInput style={{borderColor: primaryColor + "88",}}/>}
                            displayEmpty
                            value={city}
                            renderValue={(value) => {
                                return (
                                    <Box sx={{display: "flex", gap: 2.5}}>
                                        <SvgIcon style={{fontSize: '20px'}}>
                                            <LocationOnIcon/>
                                        </SvgIcon>
                                        {renderLocation && value}
                                    </Box>
                                );
                            }}
                            onChange={cityValueHandler}
                        >

                            {shopLocation.map((option) => (
                                <MenuItem key={option.gg} value={option.gg}>
                                    {option.gg}
                                </MenuItem>
                            ))}
                        </Select>

Answer 1

菜单列表的容器是 ，Paper它是Menu（ 的下拉列表Select）的一部分。您可以像下面这样定位嵌套组件的 props。请参阅此处获取类名列表Menu。还要查看组件状态的所有类名。

<Select
  // to override the border color of the Select input
  sx={{
    "&:hover": {
      "&& fieldset": {
        border: "3px solid green"
      }
    }
  }}
  // to override the color of the dropdown container
  MenuProps={{
    PaperProps: {
      sx: {
        "& .MuiMenuItem-root.Mui-selected": {
          backgroundColor: "yellow"
        },
        "& .MuiMenuItem-root:hover": {
          backgroundColor: "pink"
        },
        "& .MuiMenuItem-root.Mui-selected:hover": {
          backgroundColor: "red"
        }
      }
    }
  }}

现场演示