reactjs - 如何更改下拉悬停颜色 react 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 的下拉菜单)。您可以像下面这样定位嵌套组件的 Prop 。参见 here Menu 类名列表。也看看所有 classNames对于组件状态。

<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"
        }
      }
    }
  }}

现场演示