How to change the dropdown hover color react Material-UI Select

Question

I need to change my dropdown hover to green. I tried inline CSS and makeStyle(), But non of these are not working for me. I have no idea to change this hover color. If anyone can help me with this, I really appreciate it.

I need to change this hover color into green. This is my code:-

                        <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

The container of the menu list is a Paper which is part of the Menu (the dropdown of the Select). You can target the props of the nested component like below. See here for the list of Menu classNames. Also have a look at all classNames for the component states.

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

Live Demo

Answer 2

You can use inputProps of Select and set the sx prop like this:

    <Select
      inputProps={{
        sx: {
          "&.MuiOutlinedInput-input:hover": {
            border: "2px solid green"
          }
        }
      }}
    >