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

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>

CodePudding user response：

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

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

CodePudding user response：

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

CodePudding user response：

Just inspect the element you want to apply hover CSS.

Find Mui-select-*** in the elements and try to apply on

.Mui-select-***:hover {
 color:green;
}

or background to green.

Be careful as this might override all of the selects in your code base, so it might not be the best solution.